aspect-ratio → padding-bottom

CSS aspect-ratio: from padding-hack to native property

Before 2021, reserving space for a 16:9 video meant the padding-top hack: a wrapper with padding-top: 56.25% (the result of 9/16 * 100), with the actual content absolutely positioned inside. The trick worked because percentage padding resolves against the container's width, indirectly forcing a proportional height. It was clever — and a maintenance burden, because every child needed absolute positioning.

Modern CSS replaces all of that with one property: aspect-ratio: 16 / 9. Chrome 88+, Firefox 89+ and Safari 15+ ship it natively. The browser computes the missing dimension automatically, so children flow normally — no position: absolute, no extra wrapper, no manual percentage math.

Common ratios to memorize

• 16:9 — HD video and YouTube embeds (ratio ≈ 1.7778);
• 4:3 — legacy TV and older devices;
• 1:1 — Instagram square posts and avatars;
• 9:16 — vertical Stories, Reels and TikTok;
• 21:9 — cinematic ultrawide;
• 1.91:1 — Open Graph and Twitter card images (1200x630).

Use cases

Embedded videos, image placeholders, card thumbnails, hero sections — anywhere a box needs to keep its shape regardless of width. Pair aspect-ratio with object-fit on the content: cover fills and crops, contain fits with letterbox, fill stretches.

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video iframe,
.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Core Web Vitals and CLS

One of the strongest reasons to adopt aspect-ratio is Cumulative Layout Shift. When an image or iframe loads after the rest of the page, content jumps unless the slot already has a known size. Declaring an aspect ratio reserves that space immediately — before the metadata loads — keeping CLS close to zero. The same effect can be achieved on <img> by setting width and height attributes, but for iframes and CSS background images, aspect-ratio is the cleanest solution.

Responsive ratios

Aspect ratios can switch with media or container queries. A hero might be 21:9 on desktop and 4:5 on mobile to keep the focal point visible. Combined with srcset for image variants, the result is a layout that respects both art direction and performance.

FAQ

How do I make a YouTube iframe responsive? Wrap it (or apply directly) with aspect-ratio: 16 / 9 and width: 100%. No padding hack, no absolute positioning.

Is the padding-top hack still necessary? Only for legacy browsers such as IE11. Every modern browser supports the property; for very old contexts, ship the hack as a fallback wrapped in @supports not (aspect-ratio: 1).

Does aspect-ratio really prevent layout shift? Yes, that is its main performance contribution. By reserving the slot before the asset loads, it stops content below from jumping when the asset arrives — the exact behavior Google measures as CLS.

What if the content is taller than the ratio allows? The property is treated as a hint. If the inner content cannot fit, the box grows past the ratio (it respects min-content). Use overflow or stricter sizing to override that.