aspect-ratio meets flex: the cleanest media card recipe
For a decade the canonical responsive 16:9 video embed used the “padding-bottom: 56.25%” trick — a hack that abused the fact that percentage padding resolves against the parent’s width. It worked, but it required a wrapper, an absolutely-positioned child, and a comment explaining why. The CSS aspect-ratio property retired all of that.
Browser support
aspect-ratio shipped in Chromium 88 (January 2021), Firefox 89 (June 2021), and Safari 15 (September 2021). Caniuse marks baseline support across all evergreen browsers as of late 2021. The CSS Sizing Module Level 4 defines it as taking precedence over the natural aspect ratio of replaced elements like img and video when both dimensions are not explicitly set.
The flex card recipe
A row of media cards where each card has a 16:9 thumbnail, then a title, then a body, all aligned at the bottom by a CTA:
.cards { display: flex; gap: 16px; flex-wrap: wrap; }
.card { flex: 1 1 280px; display: flex; flex-direction: column; }
.card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.card .cta { margin-top: auto; }Four properties do the work the old hack needed eight or nine for. The thumbnail keeps its ratio at any width; the column flex on the card plus margin-top: auto on the CTA aligns the call-to-action to the bottom of every card regardless of body length. Una Kravets walks through the same recipe on web.dev in “New CSS aspect-ratio property” (Google, 2021).
The trap: aspect-ratio with explicit height
Set both aspect-ratio and height on the same element and the height wins. The aspect-ratio is treated as a hint, not a constraint, and is ignored in favour of the explicit dimension. This bites people who write height: 100% on a flex item that should also keep a ratio — the height collapses or expands and the ratio silently drops. Specify only one dimension and let the ratio derive the other.
The fr unit comparison
In a CSS Grid layout you can write grid-template-columns: repeat(3, 1fr) and rely on track equality. In flex you cannot — flex items size from content. aspect-ratio on the items themselves is the cleanest way to enforce a uniform shape across a flex row. It does what fr implicitly gives you in Grid.
Print and email
Email clients still strip aspect-ratio. For email templates, the padding-bottom hack remains the safe choice. For print stylesheets, the property works in modern Chromium-based print but Firefox print is still inconsistent as of 2025.
Related
Get FlexFrog on the App Store. Built by Moruk Labs.