This feature allows specifying a width and height on <source> elements that are used in <picture>, which allows the image to compute an aspect ratio from these attributes, e.g.: <picture> <source srcset="image.jpg" width="640" height="480"> <img style="width: 100%; height: auto;"> </picture> In this example, the width of the image will adjust to the size of its container and the height will follow the aspect ratio, even before the image is loaded (avoiding a content shift).

Motivation

Matches similar behavior for non-<picture> images, <canvas> and <video>

Specification

Specification link


Specification being incubated in a Community Group

Status in Chromium

Blink>CSS


Enabled by default (tracking bug)

Consensus & Standardization

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

Owner

Last updated on 2021-10-18