Common aspect ratios and sizes
Each ratio below has its own calculator page with a resolution cheat sheet, diagram and CSS code.
| Ratio | Common size | Typical use |
|---|---|---|
| 16:9 Widescreen | 1920 × 1080 px | YouTube videos, TVs and monitors, presentations and game streaming |
| 9:16 Vertical | 1080 × 1920 px | TikTok, Instagram Reels and Stories, YouTube Shorts and vertical mobile ads |
| 1:1 Square | 1080 × 1080 px | Profile pictures, Instagram and Facebook feed posts, carousel ads and product photos |
| 4:3 Standard | 1024 × 768 px | iPad screens, older TVs and monitors, Micro Four Thirds cameras and retro games |
| 3:2 Classic photo | 1800 × 1200 px | DSLR and mirrorless photos, 6 × 4 inch prints and 3:2 laptop screens |
| 21:9 Ultrawide | 2520 × 1080 px | Ultrawide monitors, cinematic video and widescreen gaming |
| 4:5 Portrait | 1080 × 1350 px | Instagram and Facebook portrait feed posts, Pinterest pins and portrait ads |
| 5:4 Print format | 1280 × 1024 px | 10 × 8 inch prints, 1280 × 1024 monitors and large-format photography |
| 2:1 Univisium | 3840 × 1920 px | Streaming series, 360-degree VR video, wide web banners and 18:9 phone screens |
| 3:1 Wide banner | 1500 × 500 px | X (Twitter) headers, website hero strips, email headers and panoramas |
| 4:1 Slim banner | 1584 × 396 px | LinkedIn cover images, slim website headers, billboard-style ad strips and signage |
| 32:9 Super ultrawide | 5120 × 1440 px | 49-inch and 57-inch super-ultrawide monitors, sim racing and dual-monitor wallpapers |
How to calculate dimensions from a ratio
Height = width × H ÷ W. Width = height × W ÷ H. Round to whole pixels, and use even numbers for video.
CSS for any ratio
.media { aspect-ratio: 16 / 9; width: 100%; }