CSS aspect-ratio Playground — Free HTML CSS JS Snippet

Maintaining a fixed width-to-height ratio on an element — a video embed, a thumbnail, a card image — used to require one of CSS's cleverest, and ugliest, workarounds. The aspect-ratio property, standardized in CSS Box Sizing Module Level 4 and supported in every major browser since 2021, replaces that entire workaround with a single declaration. This playground puts both techniques side by side so you can see exactly what problem aspect-ratio solves and why it was worth waiting for.

The old problem: percentages in CSS are relative to width, not height

Historically there was no way to say "make this box's height a fraction of its width" directly. The workaround exploited a specific, slightly obscure quirk of the CSS box model: when you set padding-top (or padding-bottom) as a percentage, that percentage is always resolved against the element's own width, never its height, even for vertical padding. Developers hijacked this quirk to build a fixed-ratio box: wrap the ratio target in an empty div, give that div padding-top: 56.25% (the height-to-width ratio of 16:9, i.e. 9 ÷ 16 × 100), and the padding itself becomes exactly the right height because it's a percentage of the parent's width. Since padding takes up space but isn't itself content, you then need a second, absolutely-positioned inner wrapper (position: absolute; inset: 0) to actually hold your real content on top of that padding, with the outer element set to position: relative; overflow: hidden. That's a minimum of three nested elements and one manually pre-calculated percentage just to get a 16:9 box.

Why the hack is fragile

Every time the target ratio changes, someone has to recompute the percentage by hand — height / width * 100 — and there's no way to express "auto" or "fall back to natural size" once the hack is in place; the box stays locked to whatever percentage was last set, permanently divorced from the element's actual content. It also doesn't compose well with intrinsic sizing: if the box needs to size itself from its content in some states and hold a fixed ratio in others, you need JavaScript to toggle inline styles, because the CSS itself has no escape hatch.

How aspect-ratio actually works

aspect-ratio: 16 / 9 (or the equivalent unitless aspect-ratio: 1.7778) tells the browser directly: derive this dimension from that one using the given ratio. It participates in the browser's normal sizing algorithm as a preferred aspect ratio — if you specify an explicit width, the browser computes height from the ratio; if you specify height, width is derived instead; if neither is constrained, both come from content as usual. Critically, aspect-ratio: auto is a real, valid value meaning "no forced ratio, size from content or replaced-element intrinsics" (this is actually the property's default, and it's why <img> and <video> elements already respect their natural width/height ratio without any extra CSS). This single declaration replaces the entire three-element hack, requires no manual percentage math, and updates instantly if you change the ratio via a CSS custom property, a media query, or JavaScript — no absolute positioning, no wrapper divs, no overflow: hidden needed just to keep clipped padding under control.

What this playground demonstrates

Five preset buttons switch a live media box between 16/9, 1/1, 4/3, 21/9, and auto, applying the value directly via element.style.aspectRatio and echoing the exact CSS declaration as text. A width slider resizes the box's container in real time so you can see the height recompute automatically at every width, exactly the behavior a responsive image grid or video gallery relies on. Beside it, a second box built with the classic padding-top technique mirrors the same ratio, with its percentage recalculated on every button click via (height / width) * 100, so you can watch both approaches update side by side — and notice that switching the modern box to auto lets it snap to a natural content height, while the legacy box has no equivalent state and simply keeps whatever percentage it was last given.

When you still need the fallback

aspect-ratio support (Chrome 88+, Firefox 89+, Safari 15+) covers effectively all production browser traffic as of 2025/2026, so the padding-top hack is now legacy knowledge worth understanding for maintaining older codebases rather than a pattern to reach for in new work.