Compute img/video aspect ratio from width and height HTML attributes

CSS

Computes the aspect ratio of an image using the HTML width and height attributes so that it can be used for sizing an image using CSS before it loads.

To correctly compute the final dimensions of an image (before it is fully loaded), this feature computes the aspect ratio from the HTML width and height attributes, so that it can be used to compute the final size when e.g. "width: 100%; height: auto;" is used in CSS. This avoids unnecessary relayouts when the image loads (compared to <img src="foo.jpg" style="width: 100%">

Documentation

https://github.com/WICG/intrinsicsize-attribute/issues/16#issuecomment-500941775

Specification

Editor's draft

Status in Chromium

Blink components: Blink>Layout

Enabled by default (tracking bug) in:

Chrome for desktop release 79
Chrome for Android release 79
Android WebView release 79

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Firefox: Shipped/Shipping
Edge: No signal
Safari: No signal
Web Developers: No signals

Owners

Intent to Prototype url

Intent to Prototype thread

Last updated on 2020-08-01