aspect-ratio reserves the box, object-fit: cover decides what happens to the image inside it. Together they prevent layout shift and let one asset serve several ratios — as long as you have decided in advance which part of the image is expendable.
.media {
aspect-ratio: 16 / 9; /* box keeps its shape at any width */
width: 100%;
}
.media img {
width: 100%;
height: 100%;
object-fit: cover; /* fill the box, crop the overflow */
object-position: 50% 35%; /* keep the interesting third, not the centre */
}object-position is the property most people never touch and should. The default crops from the centre, which for a portrait or a product shot usually means cutting the top of the head or the bottom of the object. Moving the anchor to 35% keeps faces intact across every crop.
Which ratios to standardise on
| Ratio | Decimal | Where it comes from | Holds up on a phone? |
|---|---|---|---|
| 1:1 | 1 | Square | Yes. Immune to orientation, which is why feeds standardised on it. |
| 4:3 | 1.333 | Fullscreen / classic TV | Yes. The most forgiving landscape ratio at small widths. |
| 3:2 | 1.5 | 35 mm photo | Yes. Photographic default, close enough to 4:3 to behave. |
| 16:9 | 1.778 | HD widescreen | Only full-bleed. In a narrow column it becomes a 200px-tall letterbox. |
| 1.91:1 | 1.91 | Social link preview | Not a layout ratio — it exists because link previews demand it. |
| 21:9 | 2.333 | Ultrawide | No. Reserve for wide hero bands on desktop and swap it out below 768px. |
| 4:5 | 0.8 | Portrait social | Yes, and it is the one that gains the most vertical space in a feed. |
| 9:16 | 0.563 | Vertical video | It is the phone. Full-screen only — never inside a layout. |
The 16:9 hero problem
A 16:9 hero image is 1.78 times wider than it is tall. At a 1440px desktop canvas that is a 810px-tall band — impressive. At a 390px phone viewport the same ratio gives you 219px of height, which is a stripe. The image is technically present and communicates nothing.
There are two honest fixes and one bad one. The bad one is leaving it. The honest ones:
- Change the ratio at a breakpoint. 16:9 on desktop, 4:3 or 1:1 on mobile. One line of CSS, and the crop is handled by
object-fit. - Art-direct with
<picture>. Serve a genuinely different crop below the breakpoint — not just the same image squeezed. This is the right answer when the subject would be cropped out.
.hero-media {
aspect-ratio: 4 / 3;
}
@media (width >= 48rem) {
.hero-media { aspect-ratio: 16 / 9; }
}<picture>
<source media="(width >= 48rem)" srcset="/img/hero-wide.jpg">
<img src="/img/hero-square.jpg" width="800" height="800" alt="…">
</picture>Why aspect-ratio replaced the padding hack
The old technique — a wrapper with padding-bottom: 56.25% and an absolutely positioned child — worked because percentage padding resolves against width. It also meant every ratio was an opaque percentage, nested elements needed absolute positioning, and nobody could tell 56.25% from 57% at a glance. aspect-ratio: 16 / 9 says what it means, works on grid and flex children, and needs no wrapper.
It also solves layout shift at the same time: the box has its final height before the image arrives, so nothing below it moves. Setting width and height attributes on the <img> achieves the same thing and is worth doing as well.
Questions
What is the difference between object-fit: cover and contain?
cover fills the box and crops whatever does not fit. contain fits the whole image inside and leaves empty space. Use cover for photography, contain for logos and product cut-outs where cropping would be wrong.
Does aspect-ratio work if I also set a height?
An explicit height wins and the ratio is ignored — the property only fills in the missing dimension. If you want a floor without losing the ratio, use min-height.
What aspect ratio should I use for social images?
1.91:1 for link previews, 1:1 or 4:5 for feed posts, 9:16 for stories and reels. Those are platform requirements rather than design choices — the full set is on social image sizes.
How do I calculate the height for a given width and ratio?
height = width × (ratio height ÷ ratio width). For 16:9 at 1440px: 1440 × 9 ÷ 16 = 810px. Every aspect ratio page lists the common widths already worked out.