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.
Related articles
- 4 min readCSS aspect-ratio Property — Modern Intrinsic Sizing Without Padding HacksThe CSS aspect-ratio property creates boxes with a fixed width-to-height ratio. Learn how it replaces the padding-top hack, works with images and video embeds, and handles...
- 5 min readGolden Ratio in Design — φ 1.618 for Layouts, Typography, and SpacingThe golden ratio (φ ≈ 1.618) creates aesthetically pleasing proportions in design. Learn how to apply it to layouts, typography scale, spacing, image crops, and logo design...
- 5 min readImage Cropping Aspect Ratios — Standard Sizes for Web, Social, and PrintDifferent platforms require specific aspect ratios for images. Learn the standard crop sizes for social media, web banners, print, and how to crop images to exact aspect ratios...
- 5 min readAspect Ratio Calculator — Calculate Width, Height, and RatiosAn aspect ratio calculator finds missing dimensions when you know the ratio and one dimension. Here's how aspect ratios work in video, photography, and responsive web design.
- 5 min readAspect Ratio Guide — Common Ratios for Video, Images, and UI DesignAspect ratio is the proportional relationship between width and height. Here's a complete reference for common aspect ratios used in video, photography, web design, and...
- 4 min readVideo Aspect Ratios — 16:9, 4:3, 21:9, and Embed Best PracticesVideo aspect ratios determine how video appears on different screens. Learn 16:9 for standard video, 21:9 for cinematic, 9:16 for vertical, embedding responsive YouTube/Vimeo,...
Pillar
Part of Dev Productivity.
Written by Mian Ali Khalid. Last updated 2026-04-25.