CSS Aspect Ratio

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.

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.

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).

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.

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.

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).

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.

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.

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.

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.