How do I set aspect-ratio in CSS?

aspect-ratio: 16 / 9 on the container. It holds the box before content loads and prevents CLS.

Do I still need padding-top?

Only for very old browsers. Modern: aspect-ratio. Legacy: wrapper with padding-top: 56.25% and absolute content.

cover fills and crops, contain letterboxes with bars. Pair with object-fit on img/video.

CSS aspect-ratio Guide

Hold any frame with one line: aspect-ratio: 16 / 9. It replaces the old padding-top hack, prevents layout shift before images load, and pairs with object-fit to control cropping.

Ratio W:Ratio H

Width (px)Height (px)

1920 × 1080

Exact ratio: 16:9 · CSS: aspect-ratio: 16 / 9 · padding-top fallback: 56.25%

Modern snippet

.frame { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
/* or contain to letterbox: object-fit: contain; background: #000; */

Legacy fallback (old browsers)

.wrap { position: relative; width: 100%; padding-top: 56.25%; /* 9/16*100 */ }
.wrap > * { position: absolute; inset: 0; }

Use the calculator above to get padding-top for any ratio: padding-top = rh/rw*100%.

cover vs contain

cover - fills the frame, crops overflow. Good for hero images where full bleed matters.
contain - fits inside, shows letterbox/pillar bars. Good when no crop is allowed.
Pair with object-position: center to control crop focus.

Common ratios to try

Tip: ratio holds even before the image loads - that is why it kills CLS. Set width and aspect-ratio on the container, not the img alone.