zes - Web APIs | MDN

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. Web APIs
3. HTMLImageElement
4. sizes

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • 日本語

• Value
• Examples
• Specifications
• Browser compatibility
• See also

1. The HTML DOM API
2. HTMLImageElement
3. Constructor
   1. Image()
4. Instance properties
   1. align Deprecated
   2. alt
   3. attributionSrc Experimental
   4. border Deprecated
   5. complete
   6. crossOrigin
   7. currentSrc
   8. decoding
   9. fetchPriority
   10. height
   11. hspace Deprecated
   12. isMap
   13. loading
   14. longDesc Deprecated
   15. name Deprecated
   16. naturalHeight
   17. naturalWidth
   18. referrerPolicy
   19. sizes
   20. src
   21. srcset
   22. useMap
   23. vspace Deprecated
   24. width
   25. x
   26. y
5. Instance methods
   1. decode()
6. Inheritance
   1. HTMLElement
   2. Element
   3. Node
   4. EventTarget
7. Related pages for HTML DOM
   1. BeforeUnloadEvent
   2. DOMStringMap
   3. ErrorEvent
   4. HTMLAnchorElement
   5. HTMLAreaElement
   6. HTMLAudioElement
   7. HTMLBRElement
   8. HTMLBaseElement
   9. HTMLBodyElement
   10. HTMLButtonElement
   11. HTMLCanvasElement
   12. HTMLDListElement
   13. HTMLDataElement
   14. HTMLDataListElement
   15. HTMLDialogElement
   16. HTMLDivElement
   17. HTMLDocument
   18. HTMLElement
   19. HTMLEmbedElement
   20. HTMLFieldSetElement
   21. HTMLFormControlsCollection
   22. HTMLFormElement
   23. HTMLFrameSetElement Deprecated
   24. HTMLHRElement
   25. HTMLHeadElement
   26. HTMLHeadingElement
   27. HTMLHtmlElement
   28. HTMLIFrameElement
   29. HTMLInputElement
   30. HTMLLIElement
   31. HTMLLabelElement
   32. HTMLLegendElement
   33. HTMLLinkElement
   34. HTMLMapElement
   35. HTMLMediaElement
   36. HTMLMenuElement
   37. HTMLMetaElement
   38. HTMLMeterElement
   39. HTMLModElement
   40. HTMLOListElement
   41. HTMLObjectElement
   42. HTMLOptGroupElement
   43. HTMLOptionElement
   44. HTMLOptionsCollection
   45. HTMLOutputElement
   46. HTMLParagraphElement
   47. HTMLPictureElement
   48. HTMLPreElement
   49. HTMLProgressElement
   50. HTMLQuoteElement
   51. HTMLScriptElement
   52. HTMLSelectElement
   53. HTMLSourceElement
   54. HTMLSpanElement
   55. HTMLStyleElement
   56. HTMLTableCaptionElement
   57. HTMLTableCellElement
   58. HTMLTableColElement
   59. HTMLTableElement
   60. HTMLTableRowElement
   61. HTMLTableSectionElement
   62. HTMLTemplateElement
   63. HTMLTextAreaElement
   64. HTMLTimeElement
   65. HTMLTitleElement
   66. HTMLTrackElement
   67. HTMLUListElement
   68. HTMLUnknownElement
   69. HTMLVideoElement
   70. HashChangeEvent
   71. History
   72. ImageData
   73. Location
   74. MessageChannel
   75. MessageEvent
   76. MessagePort
   77. Navigator
   78. PageRevealEvent
   79. PageSwapEvent
   80. PageTransitionEvent
   81. Plugin Deprecated
   82. PluginArray Deprecated
   83. PromiseRejectionEvent
   84. RadioNodeList
   85. UserActivation
   86. ValidityState
   87. Window
   88. WorkletGlobalScope

• Value
• Examples
• Specifications
• Browser compatibility
• See also

The HTMLImageElement property sizes allows you to specify the layout width of the image for each of a list of media conditions. This provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions.

Each condition is specified using the same conditional format used by media queries.

Value

A string containing a comma-separated list of source size descriptors followed by an optional fallback size. Each source size descriptor is comprised of a media condition, then at least one whitespace character, then the source size value to use for the image when the media condition evaluates to true.

Media conditions

Each source size descriptor consists of a media condition as defined by the media queries standard. Because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width information. See Using media queries, Syntax for details on how to construct a media condition.

Source size values

The source size value is a CSS <length>. It may be specified using font-relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width).

Note: The source size value must not be specified as a percentage of the container size; that is, lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of.

Examples

Selecting an image to fit window width

In this example, a blog-like layout is created, displaying some text and an image for which three size points are specified, depending on the width of the window. Three versions of the image are also available, with their widths specified. The browser takes all of this information and selects an image and width that best meets the specified values.

How exactly the images are used may depend upon the browser and the pixel density of the user's display.

Buttons at the bottom of the example let you actually modify the sizes property slightly, switching the largest of the three widths for the image between 40em and 50em.

HTML

html<article> <h1>An amazing headline</h1> <div class="test"></div> <p> This is even more amazing content text. It's really spectacular. And fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure. </p> <img src="new-york-skyline-wide.jpg" srcset=" new-york-skyline-wide.jpg 3724w, new-york-skyline-4by3.jpg 1961w, new-york-skyline-tall.jpg 1060w " sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em" alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." /> <p> Then there's even more amazing stuff to say down here. Can you believe it? I sure can't. </p> <button id="break40">Last Width: 40em</button> <button id="break50">Last Width: 50em</button> </article>

CSS

cssarticle { margin: 1em; max-width: 60em; min-width: 20em; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "Open Sans", Verdana, Arial, Helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; }

JavaScript

The JavaScript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the JavaScript string replace() method to replace the relevant portion of the sizes string.

jsconst image = document.querySelector("article img"); const break40 = document.getElementById("break40"); const break50 = document.getElementById("break50"); break40.addEventListener( "click", () => (image.sizes = image.sizes.replace(/50em,/, "40em,")), ); break50.addEventListener( "click", () => (image.sizes = image.sizes.replace(/40em,/, "50em,")), );

Result

The page is best viewed in its own window, so you can adjust the sizes fully.

Specifications

Specification
HTML Standard # dom-img-sizes

Browser compatibility

BCD tables only load in the browser

See also

• Media queries
• Using media queries
• HTML images
• Responsive images
• Using the srcset and sizes attributes

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Dec 19, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content