Smallest whole-pixel size 16 × 9.
In CSS: aspect-ratio: 16 / 9. Rotated it becomes 9:16.
Where 16:9 is used
HDTV, YouTube, virtually every desktop monitor, 1080p and 4K.
Chosen in the 1980s as the geometric mean between 4:3 television and 2.35:1 cinema, so both could be shown with minimal waste. It became the single most common display ratio on earth.
Rendered live with aspect-ratio: 16 / 9.
16:9 resolutions
Every size below is exactly 16:9 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 160 × 90 | 160 | 90 | 0.01 | — |
| 176 × 99 | 176 | 99 | 0.02 | — |
| 192 × 108 | 192 | 108 | 0.02 | — |
| 208 × 117 | 208 | 117 | 0.02 | — |
| 224 × 126 | 224 | 126 | 0.03 | — |
| 240 × 135 | 240 | 135 | 0.03 | — |
| 256 × 144 | 256 | 144 | 0.04 | — |
| 272 × 153 | 272 | 153 | 0.04 | — |
| 288 × 162 | 288 | 162 | 0.05 | — |
| 304 × 171 | 304 | 171 | 0.05 | — |
| 320 × 180 | 320 | 180 | 0.06 | — |
| 336 × 189 | 336 | 189 | 0.06 | — |
| 352 × 198 | 352 | 198 | 0.07 | — |
| 368 × 207 | 368 | 207 | 0.08 | — |
| 384 × 216 | 384 | 216 | 0.08 | — |
| 400 × 225 | 400 | 225 | 0.09 | — |
| 416 × 234 | 416 | 234 | 0.1 | — |
| 432 × 243 | 432 | 243 | 0.1 | — |
| 448 × 252 | 448 | 252 | 0.11 | — |
| 464 × 261 | 464 | 261 | 0.12 | — |
| 480 × 270 | 480 | 270 | 0.13 | — |
| 496 × 279 | 496 | 279 | 0.14 | — |
| 512 × 288 | 512 | 288 | 0.15 | — |
| 528 × 297 | 528 | 297 | 0.16 | — |
| 544 × 306 | 544 | 306 | 0.17 | — |
| 560 × 315 | 560 | 315 | 0.18 | — |
| 576 × 324 | 576 | 324 | 0.19 | — |
| 592 × 333 | 592 | 333 | 0.2 | — |
| 608 × 342 | 608 | 342 | 0.21 | — |
| 624 × 351 | 624 | 351 | 0.22 | — |
| 640 × 360 | 640 | 360 | 0.23 | — |
| 656 × 369 | 656 | 369 | 0.24 | — |
| 672 × 378 | 672 | 378 | 0.25 | — |
| 688 × 387 | 688 | 387 | 0.27 | — |
| 704 × 396 | 704 | 396 | 0.28 | — |
| 720 × 405 | 720 | 405 | 0.29 | — |
| 736 × 414 | 736 | 414 | 0.3 | — |
| 752 × 423 | 752 | 423 | 0.32 | — |
| 768 × 432 | 768 | 432 | 0.33 | — |
| 784 × 441 | 784 | 441 | 0.35 | — |
Using 16:9 in CSS
/* Modern — one line */
.box { aspect-ratio: 16 / 9; }
/* With a fixed width */
.box { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 56.25%; }
.box-legacy > * { position: absolute; inset: 0; }Devices with a 16:9 screen
| Device | Native resolution | CSS viewport | Diagonal |
|---|---|---|---|
| iMac 24″ (M4) | 4480 × 2520 | 2240 × 1260 | 23.5″ |
| iMac 24″ (M1) | 4480 × 2520 | 2240 × 1260 | 23.5″ |
| iMac 27″ 5K | 5120 × 2880 | 2560 × 1440 | 27″ |
| Studio Display | 5120 × 2880 | 2560 × 1440 | 27″ |
| Pro Display XDR | 6016 × 3384 | 3008 × 1692 | 32″ |
| Nintendo Switch 2 | 1920 × 1080 | 1920 × 1080 | 7.9″ |
| Nintendo Switch OLED | 1280 × 720 | 1280 × 720 | 7″ |
| Nintendo Switch | 1280 × 720 | 1280 × 720 | 6.2″ |
| Nintendo Switch Lite | 1280 × 720 | 1280 × 720 | 5.5″ |
| ASUS ROG Ally X | 1920 × 1080 | 1920 × 1080 | 7″ |
Named standards at 16:9
Questions about 16:9
What resolution is 16:9?
16:9 is a ratio, not a fixed resolution — any size where width ÷ height equals 1.7778 qualifies. The smallest whole-pixel pair is 16 × 9, and common ones include 640 × 360, 656 × 369, 672 × 378, 688 × 387.
What is 16:9 used for?
HDTV, YouTube, virtually every desktop monitor, 1080p and 4K.
How do I set 16:9 in CSS?
Use the aspect-ratio property: aspect-ratio: 16 / 9;. The element then keeps that shape at any width. It is supported in every current browser.
What is 16:9 the other way round?
Rotated to portrait it becomes 9:16 — the same shape, turned 90 degrees.
How do I calculate a 16:9 height from a width?
Multiply the width by 0.5625. For example width × ratio = height. The calculator does it both directions.