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

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 79)
Intent stage: Prepare to ship

Summary

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.

Motivation

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%">

Standards & signals

Specification: https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
Firefox: Shipped/Shipping — Now turned on by default
Safari: No signal
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=979891

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

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

View on chromestatus.com