Where 2:1 is used
2:1 is twice as wide as it is tall. Phone screens sold as 18:9 have the same shape. Typical uses: Web banners, wide hero images and the 18:9 shape of many phone screens.
Common 2:1 resolutions
| Width × height | Name |
|---|---|
| 1200 × 600 px | Web banner |
| 1920 × 960 px | Wide hero |
| 2160 × 1080 px | 18:9 phone |
| 4096 × 2048 px | Panorama |
How to calculate 2:1 dimensions
Height = width × 1 ÷ 2. Width = height × 2 ÷ 1. Round to whole pixels; many video encoders also need even numbers.
CSS for a 2:1 box
.media { aspect-ratio: 2 / 1; width: 100%; }