Where 3:1 is used
3:1 is three times as wide as it is tall, suitable for thin banners that leave room for content below. Typical uses: Website header strips, email headers and wide panoramas.
Common 3:1 resolutions
| Width × height | Name |
|---|---|
| 900 × 300 px | Email header |
| 1500 × 500 px | X (Twitter) header |
| 1920 × 640 px | Website strip |
| 3000 × 1000 px | High resolution |
How to calculate 3:1 dimensions
Height = width × 1 ÷ 3. Width = height × 3 ÷ 1. Round to whole pixels; many video encoders also need even numbers.
CSS for a 3:1 box
.media { aspect-ratio: 3 / 1; width: 100%; }