CSS aspect-ratio Helper
Pick a ratio preset or custom width:height.
Overview
The CSS aspect-ratio Helper produces a aspect-ratio property value from either a preset (1:1 square, 16:9 widescreen, 4:3 classic, 3:2 photo, 9:16 portrait, 21:9 cinema) or a custom width-to-height ratio you type in. Output is the bare value plus a width: 100% companion line you can paste into any container or image rule.
This is the fast path when learning how to use CSS aspect-ratio for responsive images or how to lock an embed iframe to 16:9 without padding tricks. Reach for it when building card grids, image galleries, and video embed wrappers that need to maintain proportions across every viewport.
How it works
The CSS Box Sizing Module Level 4 introduced the aspect-ratio property, which forces an element's preferred ratio of width to height when only one dimension is set. If width is 100% of the container, the browser computes the height; if a height is forced instead, the width follows. It replaces the classic padding-top: 56.25% hack that required an absolutely positioned inner wrapper.
The helper handles fractional ratios (e.g. 1.5 for 3:2) and gives you the option to emit either the width / height ratio form (16 / 9) or a single-number form (1.7777). Modern browsers accept both; the slash form reads better in code reviews.
Examples
- 16:9 video →
aspect-ratio: 16 / 9; width: 100%;. - 1:1 avatar wrapper →
aspect-ratio: 1; width: 100%;. - 3:4 portrait card →
aspect-ratio: 3 / 4; width: 100%;. - A 21:9 hero banner →
aspect-ratio: 21 / 9; width: 100%;.
FAQ
What if both width and height are explicitly set?
The element honours both and aspect-ratio is ignored. The property only kicks in when one dimension is auto.
Does aspect-ratio work on inline elements?
No. The element must be a block or inline-block (or display: grid/flex). Plain inline elements have no width or height of their own.
Can I animate aspect-ratio?
Yes, modern browsers interpolate between two ratio values, but transitions look smoother on transform: scale() for most card-flip effects.
Does this replace the old padding-bottom trick?
For all evergreen browsers, yes. The padding trick is only needed for very old engines that no longer matter for new builds.