CSS Aspect Ratio
Generate CSS aspect-ratio with padding-top fallback, object-fit options, 16+ presets, decimal input. Live preview. Free, client-side.
Generate aspect-ratio CSS - with optional padding-top fallback for legacy browsers wrapped in @supports. 16+ presets. object-fit selector. HTML usage examples for div / img / video / iframe.
CSS
HTML
How to Use CSS Aspect Ratio
- Enter width and height numbers, or pick a preset from the grouped dropdown (Video / Photo / Social / Web).
- Click ↓ Simplify by GCD to reduce (e.g., 1920×1080 → 16:9).
- Set CSS selector (default
.ratio-box) and target element (div / img / video / iframe). - Pick output style. Modern only uses
aspect-ratioproperty (works in Chrome 88+, Firefox 89+, Safari 15+ - covers ~96% of browsers in 2026). padding-top only uses the legacy hack (works everywhere including IE 11). Both wraps the padding-top fallback in@supports not (aspect-ratio: 1 / 1)for safe progressive enhancement. - For media elements, pick object-fit. cover crops to fill; contain letterboxes to fit.
- Copy CSS, copy HTML pattern, or download as
aspect-ratio-{w}x{h}.css.
Frequently Asked Questions
How do I make an embedded video or iframe responsive?
Give the iframe width: 100%; height: auto; aspect-ratio: 16 / 9; and remove the fixed width/height attributes from the embed code (or leave them, CSS wins). The element then scales with its container while keeping the video shape, no wrapper div needed. For older-browser support, wrap it in a container using the padding-top fallback this tool generates, with the iframe positioned absolutely inside.
aspect-ratio vs padding-top – which to use?
Modern aspect-ratio: simpler, no wrapper element needed, works in Chrome 88+ (Jan 2021), Firefox 89+ (Jun 2021), Safari 15+ (Sep 2021), Edge 88+. As of 2026, ~96% of browsers globally support it. padding-top hack: works everywhere including IE 11, but requires a relatively-positioned wrapper with an absolutely-positioned child. Both via @supports: best of both worlds – modern browsers use the clean property, old browsers fall back. Pick “Both” if you must support <1% legacy traffic.
How does the padding-top fallback work?
Set the wrapper’s padding-top to (height/width × 100)% – this percentage is calculated from the parent’s width, so it scales responsively. For 16:9: padding-top: 56.25% (because 9/16 = 0.5625). The child element is absolutely positioned to fill the wrapper’s actual content area (which is now the desired aspect-ratio size).
What does object-fit do?
Controls how media (img / video) fits inside a sized container. cover: scale to cover the entire container, cropping if needed (most common for hero images). contain: scale to fit entirely inside, letterboxing the empty space. fill: stretch to exactly fill (distorts aspect). scale-down: like contain but never upscales smaller images. Use cover for backgrounds, contain for product photos where the whole image must show.
What’s the @supports wrapper?
CSS feature query that applies rules only if the browser does NOT support a given property. @supports not (aspect-ratio: 1 / 1) means “apply the inner rules only on browsers that lack aspect-ratio support.” Modern browsers ignore this block; legacy browsers apply the padding-top fallback inside.
What aspect ratios are common?
Video: 16:9 (1080p, 4K, YouTube), 21:9 (cinema), 2.39:1 (true cinemascope). Photo: 3:2 (DSLR), 4:5 (Instagram portrait). Social: 1:1 (Instagram square), 9:16 (Stories, Reels, TikTok), 3:1 (Twitter/X header). Web: golden ratio 1.618:1 (design), 16:10 (old monitors).
Why simplify by GCD?
Source dimensions like 1920×1080 are equivalent to 16:9 once reduced by their greatest common divisor (120). The CSS aspect-ratio property accepts either form, but 16 / 9 is the conventional way to write it and the more familiar form for anyone reading the code.
What about decimal aspect ratios?
CSS accepts decimals: aspect-ratio: 1.618 (golden ratio). The tool accepts any positive number including decimals. The display shows both forms (e.g., “16:9 · 1.778:1”) for clarity.
Does aspect-ratio prevent layout shift?
Yes – that’s its main benefit for images. Set aspect-ratio on an img element matching its intrinsic ratio, and the browser reserves the right amount of space before the image loads. No more CLS (Cumulative Layout Shift) jumps in your Core Web Vitals. Browsers since 2022 even infer aspect-ratio automatically from img’s width and height attributes.
Is anything uploaded?
No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.