Intrinsic Size Attribute Sample

Available in Chrome 71+ | View on GitHub | Browse Samples

Live Output

Background

"intrinsicSize" attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. This is useful in combination with "unsized-media" feature policy because it allows for images proportional to window width without causing layout instability. In addition, "intrinsicSize" attribute is useful to reduce excesive layout, especially helpful for responsive images where one or more dimensions are missing. object-fit serves a similar purpose by preserving the aspect ratio, but does not alter element size. Please read the explainer for "intrinsicSize" attribute for more details.

This attribute overrides the actual intrinsic size of a media element. Specifically, the image would raster at these dimensions and naturalWidth/naturalHeight on images would return the value specified in this attribute. On video elements, the video would raster at this size and videoWidth/videoHeight on the video would return the intrinsicsize values.

Case 1

If no width/height are otherwise set on an image, then the size is specified by "intrinsicsize".

    <img intrinsicsize="250 x 200" src="cat.jpg">
  

Get Image Sizing Info

Case 2

If the width is set on an image, then the height is set to maintain the aspect ratio defined in "intrinsicsize".

    <div style="width:300px;">
      <img intrinsicsize="250 x 200" style="width:100%" src="cat.jpg">
    </div>
  

Get Image Sizing Info

Case 3

If width and height are set on an image, then value of the "intrinsicsize" attribute only affects the values of naturalWidth/naturalHeight, but not the rendered size of the image.

    <img intrinsicsize="250 x 200" width="450" height="400" src="cat.jpg">
  

Get Image Sizing Info