Aspect Ratios Explained: 16:9, 4:3, 21:9 and When to Use Each
April 11, 2026 · 5 min read
YouTube thumbnails need 16:9, Instagram feed posts are 1:1, movies are shot in 21:9... aspect ratios get confusing fast when you're creating content across platforms. Here's a no-fluff breakdown of what each ratio is for and when to use it.
What Is an Aspect Ratio?
An aspect ratio is the proportional relationship between width and height. 16:9 means 16 units wide and 9 units tall. It's independent of actual pixel count: both 1920x1080 and 3840x2160 are 16:9. Same ratio, different resolutions. Content scales without stretching or squishing.
Common Ratios at a Glance
4:3 — The Classic
The standard for old TVs and early computer monitors. Mostly retired now, though the iPad screen is still close to 4:3. Some people actually prefer it for reading and document work since there's more vertical space. Presentation slides used to default to 4:3 before the 16:9 takeover.
16:9 — Current Standard
The most widely used ratio in 2026. YouTube, Netflix, TV broadcasts, most monitors and laptops. Full HD (1920x1080), QHD (2560x1440), and 4K (3840x2160) are all 16:9. When in doubt, go with 16:9.
21:9 — Ultrawide
Close to the cinema standard (technically 2.39:1). Ultrawide monitors (3440x1440) use this ratio. Great for video editing and coding with side panels. The tradeoff: regular 16:9 YouTube videos will have black bars on the sides.
1:1 — Square
Instagram's signature. Clean look on mobile, consistent feed appearance. Also used for profile pictures, album covers, and app icons.
9:16 — Vertical
Phone held upright. TikTok, YouTube Shorts, Instagram Reels, Instagram Stories. The fastest-growing format in the mobile-first era.
Platform Quick Reference
| Platform | Ratio | Recommended Resolution |
|---|---|---|
| YouTube | 16:9 | 1920x1080 |
| YouTube Shorts | 9:16 | 1080x1920 |
| Instagram Feed | 1:1 or 4:5 | 1080x1080 |
| Instagram Stories/Reels | 9:16 | 1080x1920 |
| Twitter (X) | 16:9 | 1200x675 |
| OG Image | 1.91:1 | 1200x630 |
| YouTube Thumbnail | 16:9 | 1280x720 |
How to Calculate Ratios
Divide both width and height by their greatest common divisor (GCD). For 1920x1080: GCD is 120, so 1920/120 : 1080/120 = 16:9.
In practice, non-standard resolutions like 1366x768 don't reduce to clean ratios. A calculator is faster than doing the math by hand every time.
Locking Ratios in CSS
Use the aspect-ratio property to maintain proportions in responsive layouts:
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.square-card {
aspect-ratio: 1;
}
No more padding-bottom: 56.25% hacks. One line, all modern browsers.