Common aspect ratios and when to use each
- 16:9: HD video, YouTube, modern TVs and monitors. The default.
- 4:3: classic TV, older iPads, some presentation software.
- 21:9: ultra-wide monitors, cinema.
- 1:1: square. Instagram feed, Twitter/X profile images.
- 9:16: vertical video. TikTok, Reels, Shorts, Stories.
- 3:2: 35mm film, DSLR photography, laptops like Surface.
- 2.39:1: anamorphic cinema. "Wide" film aspect.
- 1200×630: Open Graph / Twitter Card ideal image size.
CSS aspect-ratio vs padding-top hack
Modern CSS lets you set aspect-ratio: 16 / 9; directly, supported in every browser released after 2021. Before that, developers used this trick:
.container {
position: relative;
padding-top: 56.25%; /* 9 ÷ 16 × 100 */
}
.container > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
The padding-top hack still works and is bulletproof across all browsers, but modern sites should
use aspect-ratio: shorter, more readable, and doesn't require an absolutely-positioned inner
element.
Responsive image/video containers
For embedded videos (YouTube, Vimeo) and responsive media:
.video-wrap {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-wrap iframe {
width: 100%;
height: 100%;
}FAQ
Why is the ratio simplified sometimes but not always?
The CSS output uses the simplified form (divide both by their GCD). 1920×1080 simplifies to 16/9. 1200×630 simplifies to 40/21.
Can I use decimal ratios?
Yes. 1.777:1 is 16:9 expressed with width normalized to 1. The CSS aspect-ratio property accepts decimals natively.
Does the ratio change when I change pixel dimensions?
No, the ratio is authoritative. Changing pixel dimensions recomputes the other dimension to preserve the ratio.