Contact emails
cbies...@google.com
Explainer
None
Specification
https://github.com/whatwg/html/pull/5894
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).
Blink component
Blink>CSS
TAG review
part of
https://github.com/w3ctag/design-reviews/issues/559
TAG review status
Not applicable
Risks
Interoperability and Compatibility
Very little risk; this matters primarily before the image is loaded
There is a small interop risk if a width/height is specified on the
source element that does not match the natural size of the image *and*
there is no other sizing specified elsewhere (on the <img>/in CSS),
such images could be incorrectly sized.
Gecko: No signal (
https://github.com/mozilla/standards-positions/issues/485)
WebKit: No signal
(
https://lists.webkit.org/pipermail/webkit-dev/2021-February/031692.html)
Web developers: No signals
Ergonomics
Reduces risk insofar as we now give <picture> similar behavior as
<img>/<video>/<canvas>
Activation
n/a
Security
n/a
Debuggability
This will show up in the styles panel like other style from
attributes, e.g. "aspect-ratio: auto 640 / 480"
Is this feature fully tested by web-platform-tests?
Yes
Tracking bug
https://crbug.com/1137794
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5737185317748736
This intent message was generated by Chrome Platform Status.