Aspect ratios: the math behind 16:9 and friends.
An aspect ratio is the simplest fact about an image — width against height — and it still manages to cause warped thumbnails, letterboxed videos, and monitors marketed with numbers that aren't quite true. Here's the one piece of math underneath all of it, the ratios you'll actually meet, and how to resize anything without stretching it.
Every image, screen, and video frame has a shape, and we describe that shape as a ratio: 16:9, 4:3, 1:1. It reads like jargon but it's grade-school math — 16 units across for every 9 units down — and one formula plus one habit (reduce by the greatest common divisor) explains everything from cinema letterboxing to why your monitor says "21:9" and lies a little.
What an aspect ratio is.
The aspect ratio of a rectangle is its width divided by its height. Write it as two numbers with a colon (16:9), or as the decimal you get by dividing (16 ÷ 9 ≈ 1.78). Two rectangles with the same ratio are the same shape at different sizes — a 1920×1080 monitor and a 1280×720 video have identical shapes, which is exactly why the video fills that screen perfectly.
Ratios ignore size on purpose. That's their whole job: they let you say "this will fit that" without talking about pixels at all.
Reducing a resolution to a ratio.
To find a resolution's ratio, divide both numbers by their greatest common divisor — the largest integer dividing both cleanly:
1920 × 1080 gcd(1920, 1080) = 120
1920/120 : 1080/120 → 16 : 9
3024 × 4032 gcd = 1008 (an iPhone photo, portrait)
→ 3 : 4
2560 × 1080 gcd = 40
→ 64 : 27 (sold as "21:9")That last one is the fun fact of this article: "21:9" ultrawide monitors are not 21:9. The common ultrawide resolutions reduce to 64:27 (≈2.37) or 43:18 (≈2.39) — 21:9 (≈2.33) is a marketing round-off chosen because it echoes the cinema look next to 16:9. The difference is small but real, and it's why pixel math against a literal 21:9 comes out slightly wrong.
The ratios you'll actually meet.
| Ratio | Decimal | Where it lives |
|---|---|---|
| 16:9 | ≈1.78 | HD/4K video, monitors, YouTube (1920×1080, 3840×2160) |
| 4:3 | ≈1.33 | Legacy TV and monitors, iPads, many webcams |
| 3:2 | 1.5 | 35mm photography, most phone photos, Surface screens |
| 1:1 | 1.0 | Avatars, album art, classic Instagram |
| 9:16 | ≈0.56 | Vertical video — Stories, Reels, Shorts, TikTok (1080×1920) |
| 64:27 | ≈2.37 | "21:9" ultrawide monitors (2560×1080, 3440×1440) |
| ~1.91:1 | ≈1.91 | Social link-preview cards (1200×630) |
| 2.39:1 | 2.39 | Anamorphic widescreen cinema |
Worth noticing: 9:16 is just 16:9 rotated — same shape, different orientation — and the 1200×630 social-card size beloved of Open Graph images reduces to 40:21, which everyone quotes as "1.91:1" because the decimal is friendlier than the fraction.
Resizing without warping.
The rule that prevents every stretched-face thumbnail ever shipped: scale both dimensions by the same factor. Fix the width you want, and the height follows from the ratio:
new height = new width × (original height / original width)
Want a 1920×1080 frame at 1280 wide?
1280 × (1080 / 1920) = 1280 × 0.5625 = 720 → 1280 × 720One wrinkle: real pixels are integers, and the formula loves producing fractions. Scale a 3:2 photo to 1000 pixels wide and the height comes out 666.67 — you have to round, and the saved image is then very slightly off-ratio. Harmless at that scale, but it's why careful pipelines pick target sizes that divide cleanly (and why video sizes are full of multiples of 8 and 16 — codecs also want dimensions their block math divides evenly).
When ratios don't match: crop, box, or stretch.
Sooner or later a 16:9 video meets a 4:3 screen, or a landscape photo meets a square slot. There are only three honest options and one dishonest one:
Letterbox / pillarbox — scale to fit entirely, pad the leftover with bars (horizontal bars = letterbox, vertical = pillarbox). Shows every pixel, costs some screen. CSS calls this object-fit: contain.
Crop — scale to fill, trim what overflows. Uses every pixel of the slot, loses the edges of the content. CSS: object-fit: cover. This is what most avatar and card layouts do, and why your carefully-composed photo loses its top and bottom in a wide banner slot.
Stretch — distort to fit. Circles become eggs, faces widen. CSS: object-fit: fill, and the reason it's the default is history, not merit. Essentially never what you want.
Aspect ratios in CSS.
The modern way to reserve a shaped box is one line: aspect-ratio: 16 / 9 on the element, and the browser derives the missing dimension. Its biggest everyday win is preventing layout shift: give images and embeds their ratio (or explicit width/height attributes, from which browsers infer it) and the page reserves the right space before the file loads, so text doesn't jump when it arrives. Before aspect-ratio, the same effect took the venerable padding-top hack (padding-top: 56.25% — that's 9/16 as a percentage); if you meet that in old code, it's the same idea in disguise.
Takeaways.
The thing to remember: a ratio is width against height with the common factor divided out — gcd is the whole trick. Resize by scaling both dimensions with one factor (newH = newW × H/W), pick contain or cover deliberately when shapes disagree, never stretch, and remember "21:9" is marketing for 64:27.
Aspect ratio is the rare bit of graphics math with no hidden depths — one division, one rounding caveat, three fit strategies. Get those right and warped thumbnails simply stop happening to you.
Simplify and resize ratios in your browser.
The Aspect Ratio Calculator reduces any W×H to its clean ratio and resizes in either direction while keeping it — the gcd math and the cross-multiplication, done for you. Entirely client-side, like everything in the workshop.
Open the Aspect Ratio Calculator
Made with love by a very serious person pretending not to be. Tooly McToolface is a workshop of free, client-side web tools. The 1200×630 card size this article mentions gets its full story in Open Graph tags, and once your image is the right shape, the image compression guide makes it the right size.