16:9 Aspect Ratio Calculator
The universal HD video and monitor standard. Enter one dimension — the other solves live.
16:9 is the dominant widescreen ratio: every HD television, most laptops, YouTube player, and game capture defaults to it. 1280×720 (HD), 1920×1080 (Full HD) and 3840×2160 (4K UHD) are all 16:9. Lock the ratio below, type either side, and copy the pair with the CSS you need to hold the frame without distortion or black bars.
1920 × 1080
Exact ratio: 16:9 · CSS: aspect-ratio: 16 / 9 · padding-top fallback: 56.25%
Formula
height = width × 9 ÷ 16
width = height × 16 ÷ 9
// padding-top fallback: 56.25% — keeps layout stable before the image loads
aspect-ratio: 16 / 9 — modern replacement for the padding hack
All math runs locally in your browser. No upload. Type either side, the other solves live — and the URL updates so you can share an exact pair (?w=1920&rw=16&rh=9) or bookmark a preset.
Common 16:9 resolutions
| Width | Height | Use |
|---|---|---|
| 320px | 180px | |
| 640px | 360px | |
| 1280px | 720px | |
| 1920px | 1080px | Full HD |
| 2560px | 1440px | |
| 3840px | 2160px | 4K |
| 5120px | 2880px | |
| 7680px | 4320px |
Exact known sizes in this ratio
- 1920×1080 — 1920×1080 Full HD (YouTube, Blu-ray, game capture)
- 1280×720 — 1280×720 HD (YouTube thumbnail, HD streaming)
- 3840×2160 — 3840×2160 4K UHD (4K masters, high-res display)
- 2560×1440 — 2560×1440 QHD (Gaming monitors, 1440p streaming)
- 1200×675 — 1200×675 X/Twitter Card (X/Twitter link card)
- 1600×900 — 1600×900 HD+ (16:9 HD+ laptops)
When to use 16:9
- YouTube thumbnails & video frames (1280×720)
- 1080p/4K streaming masters
- Slides (16:9 widescreen)
- Game capture & OBS canvas at 1920×1080
Pitfalls to avoid
- Letterboxing when 4:3 or 21:9 content is forced into 16:9
- 4K is 3840 — not 4096 — so DCI 4K (4096×2160) is slightly wider
- CSS width:100% without aspect-ratio collapses the box before the image loads
CSS snippet
Modern:
.frame { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.frame > img { width: 100%; height: 100%; object-fit: cover; }Legacy padding hack (for very old browsers):
.wrap { position: relative; width: 100%; padding-top: 56.25%; }
.wrap > * { position: absolute; inset: 0; }Pair with object-fit: contain to letterbox without cropping, or cover to fill and crop safely.
Platform reference
Frequently asked
What resolutions are 16:9?
Any pair where w ÷ h = 1.777…: 640×360, 1280×720, 1920×1080, 2560×1440, 3840×2160 and any multiple of 16 by 9.
How do I keep 16:9 in CSS?
Put aspect-ratio: 16 / 9 on the container. Legacy fallback: padding-top: 56.25% on a wrapper with the content absolutely positioned.
Is 16:9 the same as 1.78:1?
Yes — 16÷9 ≈ 1.778, so cinema listings write 1.78:1. Both mean the same frame shape.
Tip: add ?w=1920 or ?h=1080 to this URL to prefill the calculator — useful for linking from a spec doc.
Other ratios
- 4:3 Aspect Ratio Calculator
- 1:1 Square Calculator
- 9:16 Vertical Calculator
- 21:9 Ultrawide Calculator
- 3:2 Aspect Ratio Calculator
- 16:10 Aspect Ratio Calculator
- 4:5 Portrait Calculator
- 2:1 Aspect Ratio Calculator
Look up by resolution
- 1920×1080 — 1920×1080 Full HD
- 1280×720 — 1280×720 HD
- 3840×2160 — 3840×2160 4K UHD
- 2560×1440 — 2560×1440 QHD
- 1366×768 — 1366×768 WXGA
- 3440×1440 — 3440×1440 UW-QHD
What aspect ratio is 1920×1080? → · Full FAQ →