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.
Related tools
- JSON Formatter — Format, validate, and beautify JSON online. 100% client-side — your data never leaves your browser.
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Word Counter — Count words, characters, sentences, paragraphs, and lines. Reading time estimate, char-limit indicators for X, LinkedIn, meta titles, and more.
- QR Code Generator — Generate QR codes for URLs, text, Wi-Fi, contact cards. Custom size, colors, error correction. Download as PNG or SVG. 100% client-side.
Pillar
Part of Dev Productivity.
Written by Mian Ali Khalid. Last updated 2026-04-25.