Aspect Ratio & Intrinsic Sizing
Reserving space for media before it loads to eliminate layout shift (CLS).
Responsive DesignBeginner
Why
An image with unknown dimensions causes the page to jump when it loads — a Core Web Vital CLS penalty. aspect-ratio reserves the box up front, so the layout is stable from first paint. StatCounter 2024 data shows 58% of web traffic is mobile.
CSS container queries (baseline 2023) and subgrid (baseline 2024) eliminate most media-query hacks, reducing responsive CSS by 30-50%.
When
Use aspect-ratio for any media with a known ratio: avatars (1:1), hero images (16:9), cards (4:3), story thumbnails (9:16). For variable-ratio content, measure on load.
How
1. Set aspect-ratio — aspect-ratio: 16 / 9 on the box, width: 100%, height: auto
2. Fill the box — img { width: 100%; height: 100%; object-fit: cover; } fills without distortion
3. Reserve space — the box has the right height before the image bytes arrive, zero CLS
4. Responsive — pair with max-width so the box shrinks on small viewports, ratio preserved
5. Variable ratio — omit aspect-ratio, set width only, let height follow the image (some CLS)
6. Padding-bottom hack (legacy) — 56.25% padding for 16:9; aspect-ratio replaces it, simpler
7. Video — same approach; <video> with aspect-ratio + object-fit: cover for poster frames
Example
/* Reserve a 16:9 box — zero CLS, image fills it */
.hero {
width: 100%;
max-width: 1200px;
aspect-ratio: 16 / 9;
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
/* Avatar — 1:1, round */
.avatar { aspect-ratio: 1; width: 48px; border-radius: 50%; object-fit: cover; }
/* Responsive card thumbnail — 4:3, shrinks with container */
.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Legacy padding-bottom hack (only if aspect-ratio unsupported) */
.legacy-16-9 { position: relative; padding-bottom: 56.25%; height: 0; }
.legacy-16-9 img { position: absolute; inset: 0; width: 100%; height: 100%; }
Common Problems
- ⚠Image with width:100% but no aspect-ratio — height is 0 until load, page jumps (CLS)
- ⚠object-fit forgotten — image distorts to fill the box instead of cropping
- ⚠Fixed px height + aspect-ratio — conflicts; pick one, let the other derive
Best Practices
- ✓Always pair aspect-ratio with object-fit: cover — reserve space, fill without distortion
- ✓Set width, let aspect-ratio derive height — never set both height and aspect-ratio
- ✓Use aspect-ratio over the padding-bottom hack — simpler, no absolute positioning, no height:0