HTMLImageElement: sizes property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
Thesizes property of theHTMLImageElement interface allows you to specify the layout width of theimage for each of a list ofmedia queries. 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. It reflects the<img> element'ssizes content attribute.
Value
A string. For more information about the syntax of thesizes attribute, see the HTML<img> reference.
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 thesizes property slightly, switching the largest of the three widths for the image between 40em and 50em.
HTML
<article> <h1>An amazing headline</h1> <div></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="(50em <= width <= 60em) 50em, (30em <= width < 50em) 30em, (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>Last Width: 40em</button> <button>Last Width: 50em</button></article>CSS
article { margin: 1em; max-width: 60em; min-width: 20em; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "Open Sans", "Verdana", "Helvetica", "Arial", sans-serif;}article img { display: block; max-width: 100%; border: 1px solid #888888; box-shadow: 0 0.5em 0.3em #888888; 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 theclick event, using the JavaScript stringreplace() method to replace the relevant portion of thesizes string.
const 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 bestviewed in its own window, so you can adjust the sizes fully.
Specifications
| Specification |
|---|
| HTML # dom-img-sizes |