Back to the catalog

Fixed aspect ratios

Layout & Sizing

aspect-ratio

Baseline widely availablederived from web-features, captured 2026-10-04
  • Chrome88
  • Edge88
  • Firefox89
  • Safari15

Features it needs

The padding-top percentage trick, and the components that wrapped it, existed because there was no way to say what shape a box should be. aspect-ratio says it directly. It reserves the space before the image loads, so it also removes the layout shift that the padding hack was often added to fix.

When this applies

Keeping a box at a fixed ratio, such as a 16/9 video wrapper or a square thumbnail.

The native approach

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

/* On a replaced element, aspect-ratio plus object-fit
   crops rather than stretches. */
.thumbnail {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You need the ratio to change based on measured content rather than being known up front.
  • You are constrained in both dimensions by a flex or grid parent. An explicit width or height, or min-height, wins over aspect-ratio, which surprises people.
  • You support browsers old enough to need the padding-top fallback.

Signs it was hand-rolled

No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.

  • a padding-bottom percentage on a wrapper with the real content positioned absolutely inside it
  • reading offsetWidth and setting height from it to keep a box in proportion

Packages this covers

Minified and gzipped, captured 2026-09-20.