← Back to release summary

Support specifying width/height on <source> elements for <picture>

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 90)
Intent stage
Start prototyping

Summary

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>

Standards & signals

View on chromestatus.com