Repository navigation
[css-sizing] Which replaced elements stretch? #12612
Description
Some replaced elements stretch their inline size to fill their containing block. The exact details of how that happens are very unclear to me, but for starters here I want to discuss which replaced elements do this.
According to my testing, there are 2 requirements:
-
The replaced element mustn't have a natural width or height.
- In
<svg>these can be set withwidthandheightattributes. (Note that in other elements they typically just set presentational hints, not natural sizes.) <img>,<input>and<video>can have natural sizes from its resource.- I think
<iframe>can't have natural sizes.
- In
-
The replaced element must have a non-degenerate preferred aspect ratio.
It can be a natural ratio or set via
aspect-ratio.However, Gecko ignores
aspect-ratioon auto-sized<iframe>, and WebKit also ignores it on auto-sized<video>. Then they don't stretch.
| Blink | WebKit | Gecko | |
|---|---|---|---|
<svg> |
✔️ | ✔️ | ✔️ |
<img> |
✔️ | ✔️ | ✔️ |
<input> |
✔️ | ✔️ | ✔️ |
<video> |
✔️ (since v139) | ❌ | ✔️ |
<iframe> |
✔️ | ❌ | ❌ |
<!DOCTYPE html>
<style>div > * { aspect-ratio: 1; width: auto; height: auto; border: solid }</style>
<div style="width: 50px; border: solid magenta">
<svg></svg>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<input type="image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<video></video>
<iframe></iframe>
</div>Agenda+ to align with Blink.
Activity
css-meeting-bot commentedon Nov 14, 2025
The CSS Working Group just discussed
[css-sizing] Which replaced elements stretch?, and agreed to the following:RESOLVED: spec what browsers are doing.The full IRC log of that discussion
<noamr> oriol: there are some replaced elements that stretch in the inline axis. the exact mechanism is not clear. I want to discuss in which cases this should happen<noamr> oriol: this happens with replaced elements that don't have natural sizes, e.g. SVG can have natural size with width/height, image gets it from the resources. also a non-degenearate aspect ratio, e.g. natural or from the CSS prop
<noamr> oriol: browsers agree with this, but eg in iframes gecko and webkit ignore the aspect ratio, but it works because iframe doesn't have preferred aspect ratio. can we resolve on those two conditions?
<emilio> +1
<fantasai> scribe+
<fantasai> fantasai: consistency seems good?
<kbabbitt> +1 for consistency
<noamr> iank_: it happens when there is no aspect ratio and no natural sizing
<noamr> PROPOSED RESOLUTION: spec what browsers are doing.
<iank_> s/no aspect ratio/non-degenerate aspect ratio/
<noamr> RSOLVED: spec what browsers are doing.
<noamr> RESOLVED: spec what browsers are doing.
<noamr> iank_: do you want to discuss what this effect?
<astearns> s/what/which elements use/
<noamr> oriol: It matches all replaced elements, but some don't have preferred aspect ratio, e.g. iframe or not-ready video
<noamr> iank_: there is a bug on other browsers to drop natural sizes on video. so that's fine
[css-sizing-3] AR rule only applies to non-degenerate AR #12612