CSS Aspect Ratio Calculator
About this generator
Calculate any CSS aspect ratio and see how it actually fits across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, and square. 10 curated presets covering the convergent ratios (16:9 video, 4:3 monitor, 21:9 ultrawide, 1:1 Instagram, 9:16 TikTok, golden, A4) plus custom W × H input that accepts decimals (1.618 for golden ratio, 1.414 for A4 √2).
Live computed values panel — simplified ratio, decimal, inverse, padding-bottom percentage, orientation. The exported CSS includes both the modern aspect-ratio rule AND the legacy padding-bottom fallback for projects targeting older browsers.
5 framework exports + URL permalink. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Aspect Ratio Visualizer?
How to use this generator
Aspect ratio reference
| Value | Use for | Why |
|---|---|---|
| aspect-ratio: 16 / 9 | video | YouTube embeds, video thumbnails, hero images. Default for any visual content. Browser support: all modern (since 2021). |
| aspect-ratio: 1 / 1 | square | Instagram posts, profile avatars, image cards. Equal width and height — works everywhere. |
| aspect-ratio: 4 / 5 | IG portrait | Instagram portrait posts (taller than wide). Better engagement than 1:1 on mobile feeds. |
| aspect-ratio: 9 / 16 | vertical video | TikTok, Instagram Stories, Reels, YouTube Shorts. Phone-native vertical video. |
| aspect-ratio: 21 / 9 | cinematic | Movie posters, ultrawide hero banners, panoramic photography. Reads as "premium" and "wide". |
| aspect-ratio: 1.618 | golden | Classical proportion (φ). Used in print design for centuries. Subtle but pleasant for cards and content blocks. |
| padding-bottom: 56.25% | legacy fallback | Pre-2021 browsers. h/w × 100. Combined with position:relative on the parent and position:absolute inset:0 on children. |
Common aspect-ratio patterns
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-embed iframe {
width: 100%;
height: 100%;
border: 0;
}.image-card {
aspect-ratio: 1 / 1;
width: 100%;
background: var(--surface);
border-radius: 12px;
overflow: hidden;
}
.image-card img {
width: 100%;
height: 100%;
object-fit: cover;
}.aspect-fallback {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 9 / 16 × 100 */
}
.aspect-fallback > * {
position: absolute;
inset: 0;
}<!-- Built-in utilities for common ratios --> <div class="aspect-video">...</div> <!-- 16/9 --> <div class="aspect-square">...</div> <!-- 1/1 --> <!-- Arbitrary value for custom ratios --> <div class="aspect-[21/9]">...</div> <div class="aspect-[1.618/1]">...</div>
Pro tips
Frequently asked questions
Why a multi-device preview instead of just one box?
A 16:9 box looks completely different framed inside an iPhone (vertical phone) vs an ultrawide monitor (horizontal). On iPhone the 16:9 box fills the screen width and leaves vertical space above and below; on ultrawide the same box is smaller because the monitor is wider than tall. Seeing the ratio at SIX device viewports simultaneously — iPhone / iPad / laptop / desktop / ultrawide / square — answers 'does this ratio work for my actual users?' in one glance instead of resizing the browser six times.
What's the padding-bottom hack and why is it in the export?
Before CSS shipped aspect-ratio (2021), the convergent way to maintain a ratio was: wrap the element, set padding-bottom: (h/w * 100)% on the wrapper, and absolutely-position the content inside. The percentage is computed relative to the WIDTH of the parent, so it scales the height to match. The export includes both the modern aspect-ratio rule AND the fallback wrapper for projects targeting older browsers (IE11, Safari 14 and older — ~3% of traffic in 2026). If you only need modern targets, delete the fallback block.
Which Tailwind utility should I use — aspect-video, aspect-square, or arbitrary value?
Tailwind v3+ ships aspect-video (16/9), aspect-square (1/1), and aspect-auto (default browser behavior). For everything else — 21:9, 4:3, 9:16, golden — use the arbitrary-value syntax: aspect-[21/9]. Works on Tailwind v3 and v4 identically. The generator's Tailwind export picks the named utility for common ratios and arbitrary syntax for custom ones.
Can I animate aspect-ratio?
Yes, since Chrome 88+ / Safari 15+ / Firefox 89+. transition: aspect-ratio 0.3s ease works for transitioning a box from one ratio to another (e.g., a card that flips from 1:1 thumbnail to 16:9 on hover). The trade-off: animating aspect-ratio triggers layout reflow, so it's not as cheap as transforming a box that already has fixed dimensions. For hover/expand effects with stable dimensions, prefer transform: scale() over aspect-ratio animation.
Why does my video iframe still have black bars even with aspect-ratio set?
Because the VIDEO's intrinsic aspect ratio doesn't match the container's. If a 4:3 source video is rendered in a 16:9 iframe, the video is letterboxed (black bars left + right). Setting the container's aspect-ratio to 16:9 only controls the iframe's shape; the video inside scales to fit within it. For pixel-perfect playback, set the container's aspect-ratio to MATCH the source video's aspect ratio. The padding-bottom percentage in the export is calculated for the container, not the video content.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.