aspect-ratio Killed the Padding-Top Hack

Ask an old frontend hand about 16:9 video embeds and watch the thousand-yard stare: a wrapper div, padding-top: 56.25% (because percentage padding resolves against width - the hack's one clever trick), position absolute on the iframe, top/left zero... Fifteen years of that. Now:

iframe.video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

Done. The element computes its own height from its width. No wrapper, no absolute positioning, no magic percentage.

The everyday uses beyond video

.product-thumb {
    aspect-ratio: 4 / 3;
    object-fit: cover;      /* the essential partner - fill the box, crop excess */
    width: 100%;
}

.avatar {
    aspect-ratio: 1;        /* a square, whatever the width */
    border-radius: 50%;
    object-fit: cover;
}

.chart-panel {
    aspect-ratio: 2 / 1;
    min-height: 200px;      /* constraints still win over the ratio when they conflict */
}

object-fit: cover is the pairing to internalize: aspect-ratio sizes the box, object-fit decides how the image fills it (cover crops, contain letterboxes). Uniform card grids from wildly inconsistent user uploads, two lines.

The layout-shift connection

Why does <img width="800" height="600"> matter again in 2026? Because browsers use those attributes to compute an implied aspect ratio before the image loads - reserving correctly-shaped space, so text doesn't jump when pixels arrive. That's a huge slice of CLS fixed by markup you were taught to delete in the responsive era. The modern rule:

<img src="hero.webp" width="1600" height="900" alt="..."
     style="width: 100%; height: auto;">

Attributes give the ratio, CSS makes it fluid. When CSS aspect-ratio is set explicitly, it overrides the attribute-derived one - both mechanisms coexist; the attributes are your no-CSS-required baseline for content images (your CMS should be emitting them automatically from stored dimensions).

Fine print

• The ratio is a preferred size: explicit height, min/max constraints or stretched flex/grid alignment override it. Surprise stretching in grids is usually align-items: stretch doing its default thing - set align-self: start.
• Content can force a box taller than its ratio (long text in a ratio'd card grows rather than overflows). That's a feature.
• Support: everywhere since 2021. The padding hack can finally be deleted on sight - it has no remaining advantage.

One of those properties that's boring precisely because it's perfect: it does the obvious thing, the old workaround was awful, migrate on contact.