Eliminate layout shift. Responsive videos. Perfect image grids. One property.
See how the element responds to the aspect-ratio value. The element width stays at 100% — only the height is computed from the ratio.
| CSS value | Decimal | Use case |
|---|---|---|
| 16 / 9 | 1.78 | HD video, YouTube, most hero images |
| 4 / 3 | 1.33 | Old TV, presentation slides, product images |
| 1 / 1 | 1.00 | Instagram square, avatar, icon containers |
| 3 / 2 | 1.50 | Photography standard (35mm), blog cards |
| 2 / 1 | 2.00 | Twitter cards, wide banner ads |
| 1.91 / 1 | 1.91 | Open Graph (og:image), Facebook link preview |
| 9 / 16 | 0.56 | TikTok, Instagram Reels, vertical video |
| 4 / 5 | 0.80 | Instagram portrait, tall product photo |
| 21 / 9 | 2.33 | Ultrawide cinematic, panoramic hero |
aspect-ratio only works when at least one dimension is auto. Set width: 100% and leave height unset — the browser calculates height from the ratio. Set both width and height explicitly and aspect-ratio is silently ignored.
Click the CLS demo to simulate page load with and without aspect-ratio and see the layout shift in action.
Replaces the old padding-bottom: 56.25% wrapper hack. The iframe itself holds the ratio — no extra div needed.
Every image cell stays square regardless of the image's natural proportions. object-fit: cover fills the space without distortion.
aspect-ratio: 1 (no slash) is the shorthand for a perfect square. No need to set both width and height — height always matches width.
The top example's text jumps when the image loads (CLS). The bottom reserves space with aspect-ratio: 16/9 — zero layout shift.
The padding hack needed 3 elements and 5 CSS rules. aspect-ratio needs 1 CSS rule. Safe for production since Chrome 88, Firefox 89, Safari 15 — 2021.
The auto keyword tells the browser to use the image's intrinsic ratio when it's loaded. The 16/9 after it is the fallback while the image is still loading — reserving exactly the right space to prevent CLS.
width and height HTML attributes to <img> tags. The browser uses these to calculate aspect-ratio: auto before the image loads, giving zero CLS with no CSS needed.
The tricky situations where aspect-ratio surprises you — and how to fix them.
When both width and height are explicitly set, aspect-ratio has no effect. At least one must be auto.
Long content inside an aspect-ratio box expands the box height beyond the ratio. Fix with min-height: 0; overflow: hidden.
In a flex container, align-items: stretch (default) can force height and override the ratio. Fix with align-self: flex-start or align-items: flex-start.
In CSS Grid, aspect-ratio works naturally — items get their width from the grid track and height is computed from the ratio.
Add overflow: hidden on grid items to prevent content from pushing beyond the ratio. No min-height: 0 needed in most grid cases.
For the rare case of supporting browsers before 2021, use @supports to progressively enhance:
In practice: aspect-ratio is supported in Chrome 88+, Firefox 89+, Safari 15+ — released in 2021. Global coverage is 97%+ in 2026. The fallback is only needed for very old devices.