Smallest whole-pixel size 2 × 1.
In CSS: aspect-ratio: 2 / 1. Rotated it becomes 9:18.
Where 2:1 is used
Univisium, some streaming originals, ultrawide phone video.
Proposed by cinematographer Vittorio Storaro as a compromise that works on both cinema and television.
Rendered live with aspect-ratio: 2 / 1.
2:1 resolutions
Every size below is exactly 2:1 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 320 × 160 | 320 | 160 | 0.05 | — |
| 480 × 240 | 480 | 240 | 0.12 | — |
| 640 × 320 | 640 | 320 | 0.2 | — |
| 720 × 360 | 720 | 360 | 0.26 | — |
| 800 × 400 | 800 | 400 | 0.32 | — |
| 960 × 480 | 960 | 480 | 0.46 | — |
| 1080 × 540 | 1080 | 540 | 0.58 | — |
| 1200 × 600 | 1200 | 600 | 0.72 | — |
| 1280 × 640 | 1280 | 640 | 0.82 | — |
| 1440 × 720 | 1440 | 720 | 1.04 | — |
| 1600 × 800 | 1600 | 800 | 1.28 | — |
| 1920 × 960 | 1920 | 960 | 1.84 | — |
| 2048 × 1024 | 2048 | 1024 | 2.1 | — |
| 2560 × 1280 | 2560 | 1280 | 3.28 | — |
| 3200 × 1600 | 3200 | 1600 | 5.12 | — |
| 3840 × 1920 | 3840 | 1920 | 7.37 | — |
| 5120 × 2560 | 5120 | 2560 | 13.11 | — |
| 7680 × 3840 | 7680 | 3840 | 29.49 | — |
Using 2:1 in CSS
/* Modern — one line */
.box { aspect-ratio: 2 / 1; }
/* With a fixed width */
.box { width: 100%; max-width: 800px; aspect-ratio: 2 / 1; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 50%; }
.box-legacy > * { position: absolute; inset: 0; }Questions about 2:1
What resolution is 2:1?
2:1 is a ratio, not a fixed resolution — any size where width ÷ height equals 2 qualifies. The smallest whole-pixel pair is 2 × 1, and common ones include 640 × 320, 720 × 360, 800 × 400, 960 × 480.
What is 2:1 used for?
Univisium, some streaming originals, ultrawide phone video.
How do I set 2:1 in CSS?
Use the aspect-ratio property: aspect-ratio: 2 / 1;. The element then keeps that shape at any width. It is supported in every current browser.
What is 2:1 the other way round?
Rotated to portrait it becomes 9:18 — the same shape, turned 90 degrees.
How do I calculate a 2:1 height from a width?
Multiply the width by 0.5. For example 1080 × 0.5 = 540. The calculator does it both directions.