Banners, thumbnails, and hero slots all share one failure mode: the media arrives late, the box collapses, and the page below shifts. aspect-ratio turns that box into a promise the engine itself keeps, which is a gacor contract for one declaration.
/* both of these hold their shape before and after load */
.banner { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1; width: 5rem; }Why it beats the padding hack
/* the old trick: correct math, unreadable by humans */
.media { padding-top: 56.25%; }- aspect-ratio works on any element, not only images and video, so cards, banner strips, and icon tiles all get one declaration instead of a percentage-padding trick built on invisible content.
- Explicit sizes win: set both width and height and the browser honors them; leave the cross axis auto and the ratio holds the box steady.
- Replaced elements such as img and video keep their intrinsic ratio as a fallback default, so a portrait photo never stretches to fill a landscape slot.
Ratios inside flex and grid
The contract survives sizing by others: a card whose width comes from a grid track still computes its height from the ratio. When a layout surprises you there, measure with the box inspector first, because the usual culprit is a stretch alignment that sets the cross axis explicitly.
One caveat worth pinning up: min-content sizing can override the ratio in a tight flex row, so give those boxes an explicit flex-basis. Add it once and the property stays remarkable stable everywhere else you use it.