Why ratios matter beyond just math
Calculating a ratio (this tool reduces dimensions by their greatest common divisor, so 1920×1080 → 16:9) is the easy part. The valuable part is using ratios to keep layouts stable and media undistorted. A few reference points worth knowing:
| Ratio | Where it’s used |
|---|---|
| 16:9 | HD/4K video, most monitors, YouTube |
| 4:3 | Classic displays, some cameras |
| 1:1 | Square social posts, avatars |
| 9:16 | Vertical/Stories, mobile video |
| 2.39:1 | Cinematic widescreen |
| 1.91:1 | Open Graph / social share images |
Reserve space, don’t let it jump
The single biggest practical use of aspect ratios is preventing layout shift (see FAQ). The pattern for a responsive, shift-free image:
img { width: 100%; height: auto; } /* fluid */
<img src="…" width="1600" height="900"> /* reserves the 16:9 box */For ratio-less boxes (a video embed, a hero with a background image), use the property directly:
.video-wrap { aspect-ratio: 16 / 9; }The browser now holds the right height from the start, so your Core Web Vitals don’t suffer a CLS penalty.
Pair with object-fit
Forcing content into a ratio risks distortion. object-fit: cover scales the media to fill the ratio box and crops the overflow (no stretching), while object-fit: contain fits the whole image inside and may letterbox. For thumbnails and cover images you almost always want cover. Use the ratio you calculate here to set aspect-ratio, then let object-fit: cover handle the fit.
Mind sub-pixel and retina math
Ratio calculations can produce fractional pixel heights (16:9 at 1365px wide = 768.28px), and browsers round these, which can cause a 1px gap or clipping in tight layouts — nudge the width to a value that yields a whole height when it matters. Separately, the ratio is independent of device pixel ratio: a 16:9 image still needs a 2× source (e.g. 3200×1800) to look sharp on a Retina display, even though the ratio is unchanged. Calculate the layout dimensions here, then multiply by DPR for the source resolution.