<imgintrinsicsize="250 x 200"src="cat.jpg">
Available inChrome 71+ |View on GitHub |Browse Samples
"intrinsicSize" attribute tells the browser to ignore the actual intrinsic sizeof the image and pretend it's the size specified in the attribute. This is useful incombination with"unsized-media" feature policybecause 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 ormore dimensions are missing.object-fit serves a similar purpose by preserving theaspect ratio, but does not alter element size. Please readtheexplainer for "intrinsicSize" attribute for more details.
This attribute overrides the actual intrinsic size of a media element. Specifically, the image would raster at thesedimensions andnaturalWidth/naturalHeight on images would return the value specified in this attribute. On video elements, the video would raster at this size andvideoWidth/videoHeight on the video would return the intrinsicsize values.
If no width/height are otherwise set on an image, then the size is specified by "intrinsicsize".
<imgintrinsicsize="250 x 200"src="cat.jpg">If the width is set on an image, then the height is set to maintain the aspect ratio defined in "intrinsicsize".
<divstyle="width:300px;"><imgintrinsicsize="250 x 200"style="width:100%"src="cat.jpg"></div>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.
<imgintrinsicsize="250 x 200"width="450"height="400"src="cat.jpg">