Aspect Ratio Calculator
Calculate width, height, or ratio. Solve any one from the other two. 16:9, 4:3, 21:9, 9:16, 1:1, custom. Free, runs in your browser.
Common ratios
What this does
Solves any one of width, height, or aspect ratio when you provide the other two. Live: change any field and the dependent one updates. Visual preview shows the actual proportional shape.
The tool’s a bit smarter than a basic calculator:
- Three-input math: if all three fields are filled, editing one updates the others to stay consistent.
- Auto-reduce: if you enter 1920 × 1080, the ratio comes back as
16:9not1920:1080. - Decimal output: the decimal value (1.778 for 16:9) is what CSS
aspect-ratio: 16/9actually computes to — useful for setting padding-top hacks, viewport math, etc. - Custom ratios: type any
W:Hstring.2.39:1for cinemascope.0.667:1for nine-by-ten. Decimals work.
Common ratios and what they’re for
| Ratio | Decimal | Used for |
|---|---|---|
| 16:9 | 1.778 | Modern HD/4K video, most monitors, YouTube, OG images on social |
| 4:3 | 1.333 | Classic TV, projectors, older iPads, some print magazines |
| 21:9 | 2.333 | Ultrawide monitors, modern cinema (close to 2.35:1) |
| 9:16 | 0.5625 | Phone vertical video — TikTok, Reels, Stories, Shorts |
| 1:1 | 1.0 | Instagram square posts, profile photos, OG icons |
| 3:2 | 1.5 | DSLR sensors, 4×6 prints, Leica film cameras |
| 5:4 | 1.25 | 8×10 prints, older 1280×1024 monitors |
| 2:1 | 2.0 | Modern OG images (1200×600), some phones, cinemascope-ish |
| 2.39:1 | 2.39 | Modern theatrical cinemascope |
| A4 landscape | 1.414 | A4/A3/A5 paper (1:√2) — rare in screen design |
Three things people usually want this for
- “What’s the height for a 1920px-wide 16:9 video?” Answer: 1080. Plug 1920 into width, leave height blank, ratio at 16:9.
- “What aspect ratio does my actual export end up at?” You exported a video at 1440×608 — what is that? Type both numbers, the ratio reduces to 90:38 ≈ 21:9. Probably ultrawide.
- “Resize to fit a 1200px-wide container, keeping ratio.” Type 1200 width, leave height blank, set ratio to your source’s ratio. Get the height.
Quick CSS aspect-ratio recipe
Modern CSS lets you write aspect-ratio: 16 / 9; directly. For older browser support (anything before 2021), the padding-top hack uses the decimal:
.video-wrap {
position: relative;
padding-top: 56.25%; /* 100% / (16/9) — i.e., 100% × 9 / 16 */
}
.video-wrap > * { position: absolute; inset: 0; }
The 56.25% comes from (9/16) × 100. For other ratios, (H/W) × 100. 4:3 → 75%. 21:9 → 42.857%. 1:1 → 100%.
Privacy
The tool runs entirely in your browser. No values are sent anywhere.