Aspect ratio is one number that quietly governs how your work is cropped, framed and displayed everywhere. This page lists every ratio in common use with matching resolutions, shows the arithmetic so you can derive any dimension without a calculator, and explains why black bars appear where they do.
The formula that covers everything
To fit a width to a ratio: height = width × (ratio height ÷ ratio width). For 16:9 at 1280 wide: 1280 × (9 ÷ 16) = 720. Reverse it to go the other way. That single line replaces every table below — the tables are for when you want the answer without doing the arithmetic.
What an aspect ratio actually describes
An aspect ratio is the proportional relationship between width and height, written width:height. It says nothing about size. A 16:9 image can be 1280 × 720 or 3840 × 2160 — same shape, vastly different resolution.
To derive one from pixel dimensions, reduce the two numbers by their greatest common divisor:
⚠️ 21:9 is not 21:9
Ultrawide monitors are sold as "21:9" but the actual resolutions do not reduce to it. 2560 × 1080 is 64:27 (2.370) and 3440 × 1440 is 43:18 (2.389). Neither equals 21 ÷ 9 = 2.333. The name was chosen because "21:9" sits neatly alongside "16:9" in marketing, not because anything measures that way. The same applies to 1366 × 768 laptops, which are sold as 16:9 but are really 683:384 — close enough to look fine, far enough that a true 16:9 video is very slightly scaled.
The complete ratio chart
| Ratio | Decimal | Common resolutions | Where it is used |
|---|---|---|---|
| 9:16 | 0.563 | 1080 × 1920, 720 × 1280 | Stories, Reels, TikTok, Shorts |
| 2:3 | 0.667 | 1000 × 1500, 1200 × 1800 | Pinterest pins, portrait photos |
| 4:5 | 0.800 | 1080 × 1350 | Instagram feed portrait |
| 1:1 | 1.000 | 1080 × 1080, 512 × 512 | Avatars, square posts, album art |
| 5:4 | 1.250 | 1280 × 1024 | 8×10 prints, legacy monitors |
| 4:3 | 1.333 | 1024 × 768, 1600 × 1200 | Old TV, iPads, phone cameras |
| 1.37:1 | 1.370 | — | Academy ratio (classic film) |
| √2:1 | 1.414 | 2480 × 3508 (A4) | ISO paper sizes |
| 3:2 | 1.500 | 1620 × 1080, 6000 × 4000 | DSLR sensors, 35mm film, 4×6 prints |
| 16:10 | 1.600 | 1920 × 1200, 2560 × 1600 | MacBooks, productivity monitors |
| 5:3 | 1.667 | 1280 × 768 | Some tablets, European film (1.66:1) |
| 16:9 | 1.778 | 1920 × 1080, 3840 × 2160 | The universal video standard |
| 1.85:1 | 1.850 | 1998 × 1080 | US theatrical "flat" |
| 1.91:1 | 1.910 | 1200 × 630 | Open Graph link previews |
| 2:1 | 2.000 | 2048 × 1024 | Univisium — common on streaming |
| 21:9 | 2.333 | 2560 × 1080, 3440 × 1440 | Ultrawide monitors (approximate) |
| 2.39:1 | 2.390 | 2048 × 858 | Anamorphic "scope" cinema |
| 3:1 | 3.000 | 1500 × 500 | X header, panoramic prints |
| 32:9 | 3.556 | 5120 × 1440 | Super-ultrawide monitors |
| 4:1 | 4.000 | 1584 × 396 | LinkedIn background banner |
Every 16:9 resolution worth knowing
Because 16:9 dominates, it is worth having its ladder in one place. Each step is a clean multiple of 16 × 9.
| Resolution | Name | Multiple of 16×9 | Total pixels |
|---|---|---|---|
| 256 × 144 | — | 16× | 36,864 |
| 426 × 240 | 240p | ~27× | 102,240 |
| 640 × 360 | nHD / 360p | 40× | 230,400 |
| 854 × 480 | FWVGA / 480p | ~53× | 409,920 |
| 1280 × 720 | HD / 720p | 80× | 921,600 |
| 1600 × 900 | HD+ | 100× | 1,440,000 |
| 1920 × 1080 | Full HD / 1080p | 120× | 2,073,600 |
| 2560 × 1440 | QHD / 1440p | 160× | 3,686,400 |
| 3200 × 1800 | QHD+ | 200× | 5,760,000 |
| 3840 × 2160 | 4K UHD | 240× | 8,294,400 |
| 5120 × 2880 | 5K | 320× | 14,745,600 |
| 7680 × 4320 | 8K UHD | 480× | 33,177,600 |
Note that 426 × 240 and 854 × 480 are not exact — 16:9 would require 426.67 and 853.33. Video encoders need even numbers for chroma subsampling, so these were rounded, and they are very slightly off-ratio as a result. Every other row on that table is exact.
Cinema ratios and where they came from
Film ratios are a direct record of an old commercial fight. Early sound film settled on the Academy ratio, 1.37:1 — near-square, because the optical soundtrack occupied a strip down the side of the frame that had previously been picture.
When television started taking cinema audiences in the 1950s, studios responded by making the screen a shape television could not match. Widescreen was, quite literally, an anti-TV measure. Two approaches survived:
| Ratio | Name | How it is achieved |
|---|---|---|
| 1.85:1 | Flat / spherical | Shot with normal lenses and masked top and bottom. Simple, and the American standard. |
| 2.39:1 | Scope / anamorphic | A special lens squeezes a wide image onto standard film, and the projector unsqueezes it. Uses the full negative, so quality is higher — and it produces the oval lens flares and shallow horizontal focus associated with the "cinematic" look. |
| 1.66:1 | European widescreen | The continental standard for decades. Rare now. |
| 2:1 | Univisium | Proposed by cinematographer Vittorio Storaro as a compromise between cinema and television. Streaming services adopted it widely because it letterboxes only modestly on a 16:9 screen. |
You may see 2.35:1 and 2.39:1 used interchangeably. Both are real: 2.35:1 was the anamorphic standard until 1970, when a specification change to reduce visible splices altered it to 2.39:1. Films made before then are genuinely 2.35; the industry simply kept saying "2.35" out of habit.
Letterboxing, pillarboxing and the alternative
When content and display disagree about shape, there are exactly three options, and each gives something up.
📺 Letterbox
Bars top and bottom. Content is wider than the screen — a 2.39:1 film on a 16:9 TV. Framing is fully preserved; screen area is wasted.
🖼️ Pillarbox
Bars left and right. Content is narrower than the screen — a 4:3 programme on a 16:9 TV. Same trade-off, rotated.
✂️ Crop
Fill the screen and discard the overflow. No bars, no distortion, but you lose part of the image — and whatever was at the edge is gone.
There is a fourth option that everyone should refuse: stretching. Scaling width and height by different factors fills the screen without losing content, at the price of distorting every face and circle in the frame. Televisions still ship with modes that do this, often enabled by default.
In CSS, the choice is expressed by object-fit:
✅ object-position is the underused half
object-fit: cover crops from the centre by default, which decapitates people in portrait photographs used as landscape thumbnails. Adding object-position: top keeps heads in frame. For a grid of user-uploaded avatars, that one line eliminates most of the bad crops.
Aspect ratio in CSS
Reserving space for an element before its content loads used to require the "padding-bottom hack". It is no longer necessary — the aspect-ratio property does it directly, and doing so is one of the most effective fixes for layout shift.
That last point is worth emphasising because it is so easily missed. Modern browsers use the width and height attributes purely to compute an aspect ratio and reserve space, then let CSS control actual sizing. Omitting them causes the page to jump as each image loads — which is precisely what the Cumulative Layout Shift metric measures. Adding them costs nothing and is one of the cheapest Core Web Vitals improvements available.
Common padding-bottom percentages
| Ratio | Percentage | Ratio | Percentage |
|---|---|---|---|
| 1:1 | 100% | 16:9 | 56.25% |
| 4:3 | 75% | 1.85:1 | 54.05% |
| 3:2 | 66.67% | 2:1 | 50% |
| 16:10 | 62.5% | 2.39:1 | 41.84% |
| 4:5 | 125% | 21:9 | 42.86% |
| 2:3 | 150% | 9:16 | 177.78% |
Working with ratios in practice
Resize to a width and keep the shape
How much you lose changing ratio
| From | To | Crop needed | Area retained |
|---|---|---|---|
| 16:9 | 1:1 | 43.8% off the width | 56.3% |
| 16:9 | 4:5 | 55.0% off the width | 45.0% |
| 16:9 | 9:16 | 68.4% off the width | 31.6% |
| 3:2 | 16:9 | 11.1% off the height | 88.9% |
| 3:2 | 5:4 | 16.7% off the width | 83.3% |
| 4:3 | 16:9 | 25.0% off the height | 75.0% |
| 1:1 | 16:9 | 43.8% off the height | 56.3% |
The 16:9 to 9:16 row explains why repurposing landscape video for vertical platforms so rarely works: you keep under a third of the frame. Anything not near the centre is gone. If a project needs both orientations, the only reliable approach is to frame for it while shooting — leave the subject centred with generous space on either side, so a vertical crop still contains a complete composition.
Calculate any dimension for any ratio
Enter a width or height and a target ratio and get the matching number instantly — no arithmetic, no sign-up.
Open the Aspect Ratio Calculator →Summary
- height = width × (ratio height ÷ ratio width) derives every value on this page.
- Reduce pixel dimensions by their GCD to find the ratio; if it does not reduce cleanly, the display is only approximately standard.
- 21:9 monitors are not 21:9. They are 64:27 or 43:18. The name is marketing.
- Letterbox for content wider than the screen, pillarbox for narrower, crop to fill. Never stretch.
- Use
aspect-ratioin CSS and always setwidthandheighton images — it is a free layout-shift fix. - Converting 16:9 to 9:16 discards about 68% of the frame. Plan for it while shooting.
Frequently Asked Questions
How do I calculate an aspect ratio from pixel dimensions?
Divide both numbers by their greatest common divisor. For 1920 × 1080 the GCD is 120, giving 16:9. If the result is ugly — 1366 × 768 reduces to 683:384 — the display is only approximately a standard ratio, which is why some laptop screens show very slight distortion on full-screen 16:9 video.
What is the difference between letterboxing and pillarboxing?
Letterboxing puts black bars at the top and bottom, and happens when content is wider than the screen — a 2.39:1 film on a 16:9 television. Pillarboxing puts bars at the left and right, and happens when content is narrower than the screen — a 4:3 programme on a 16:9 television. Both preserve the original framing rather than cropping it.
What aspect ratio should I use for video?
16:9 for anything played on a television, monitor or YouTube. 9:16 vertical for Stories, Reels, TikTok and Shorts. 1:1 square still works well in social feeds because it occupies more height than 16:9 without being fully vertical. If you are shooting once for several destinations, shoot 16:9 with the action centred so a 9:16 crop still works.
Why is 16:9 the standard?
It was chosen as a mathematical compromise. When the standard was being set, existing content ranged from 4:3 television to 2.35:1 cinema. 16:9 (1.78:1) is close to the geometric mean of that range, so it wastes the least screen area averaged across all the formats it would need to display. It was engineered as a compromise rather than picked for looking good.
Does aspect ratio affect image quality?
Not by itself — but changing one does. Cropping to a new ratio discards pixels and reduces resolution. Stretching to a new ratio without cropping distorts the image, making faces look wide or narrow. Only cropping preserves quality; letterboxing preserves the framing at the cost of screen area.