One declaration replacing a workaround
aspect-ratio holds a box at a fixed proportion: give it a width and the height follows, or give it a height and the width does.
Before it existed, the same result needed the padding trick — an element with top padding set to a percentage of its width, and the real content positioned absolutely on top of it. Several lines of workaround, two elements where one would do, and a percentage nobody could read at a glance. The [msm_tool slug="css-aspect-ratio"] generates both, so the fallback is there if you need it.
The fallback percentage is inverted
This is the part that goes wrong by hand, and it goes wrong silently.
The padding trick expresses height as a percentage of width, so the number is the inverse of the ratio rather than the ratio itself. 16:9 becomes 56.25%. But 4:3 becomes 75%, and 21:9 becomes 42.86%.
Copying 56.25% from a snippet and changing the aspect-ratio line to 4:3 produces a fallback that lays out at widescreen while the stylesheet claims it is a classic photo shape. It looks entirely correct in the code and wrong on any browser that uses the fallback.
Content can override it
The property expresses a preference, not a hard limit. An element whose contents are taller than the ratio allows will grow to fit them.
That is usually what you want — text should not be clipped because a box wanted to be square — but it means a grid of cards set to 1:1 can still come out uneven if one card has more text. If the ratio must hold regardless, pair it with overflow: hidden or a fixed height, and accept that something will be cut off.
Images need object-fit alongside it
Setting a ratio on an image element holds the box at that shape and stretches the image to fill it, which distorts anything whose natural proportions differ.
object-fit: cover crops to fill the shape and is what you want for photographs in a grid. object-fit: contain fits the whole image inside with space around it, which suits logos and product shots where nothing should be cut off. Without one of them, the ratio is a distortion tool.
object-position is the companion worth knowing: cover crops from the centre by default, so a subject near the top of a photograph loses its head in a wide crop unless you shift the position.
Its best use is stopping layout shift
An image with no dimensions occupies no space until it loads, at which point everything below it jumps. That is a measurable and widely penalised problem, and it is the reason width and height attributes came back into fashion on <img> tags.
aspect-ratio does the same job in CSS, and does it for elements that are not images: embedded video, map panels, ad slots, chart containers. Reserve the space and nothing moves when the content arrives.
Common ratios and where they come from
- 16:9 — video, and by extension most embeds and thumbnails.
- 4:3 — older photography and screens; still common for product images.
- 3:2 — the 35mm frame, and what most cameras still produce.
- 1:1 — avatars, product grids, and most social feeds.
- 1.91:1 — the shape most social platforms crop link previews to.
- 9:16 — vertical video.
These are conventions rather than rules, but anything displaying your image will crop toward one of them. Choosing a ratio the destination does not expect means the crop happens somewhere you do not control.
Support
Broadly supported for years now, and there is no strong reason to avoid it. The generated fallback is there for genuinely old browsers — wrapped in a @supports not block so it applies only where the property is missing, rather than fighting with it everywhere else.