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

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 90
  • Chrome for Android release 90
  • Android WebView release 90

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-05-15