Skip to main content
sizes attribute | sizes property

Specifies how large an image will render within a layout.

Syntax

HTML
<element sizes="p" ... >

 

Property values

Type: String

A string value that is a media descriptor specifying the size of the image. This could be either a single length (e.g. sizes="100vw"), a single media query with length (e.g. sizes="(min-width: 60em)" 60vw), or a comma separated list of media queries with length, the last width being the default (e.g. sizes="(min-width: 60em) 60vw, (max-width: 50em) 50vw, 100vw).

Standards information

Remarks

Percentage values can't be used due to sizes being evaluated before the layout is completed. For more information, see Using extended srcset and the picture element to tailor your image to every device and layout.

The vw unit can be used for sizes relative to the viewport width. An example of this would be "sizes="100vw"".

When using the picture element, the sizes attribute can be applied to both img and source elements.

A length that is not paired with a media query is a default length.

The sizes attribute can be used in a source element when nested within a picture element.

Examples

In the example below, an img element contains both the sizes and srcset attribute. Because sizes specifies that the viewport width must be at least 900px wide with 25vw, the browser-selected image from srcset will take up 25% of a viewport that has a width greater than 899px.


<img src=”fallback.jpg” sizes=”(min-width: 900px) 25vw, 100vw” srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w">

See also

img
source