CSS aspect-ratio generator — keep video and image boxes in shape

How to use the CSS aspect ratio generator

1. Type the Ratio. You can write 16:9, 16/9, 1920x1080, 1920×1080 or a single number such as 2.39.
2. Keep Include the padding-top fallback ticked if you need support for very old browsers.
3. Read the Simplified ratio, the Decimal (width ÷ height) and the Height as % of width.
4. Copy the .media rule, or pick a ratio from the Common ratios table.

What it does and when to use it

aspect-ratio keeps a box in shape while its width changes. Use it for responsive video embeds, image placeholders that reserve space before the picture loads (which stops the page from jumping), square avatar tiles, portrait product cards and full-width cinema-style banners.

When the box holds an image or video, combine it with the object-fit generator so the media fills the shape without distortion. To get an image file at the exact ratio, use the image cropper, and for a grid of equal tiles, the CSS grid generator.

How it works

The tool reads two numbers (or one, with a height of 1) and reduces them. Decimal ratios are scaled up first, so 2.39 becomes 239 / 100. It then writes:

.media {
  aspect-ratio: 16 / 9;
  width: 100%;
}

With the fallback ticked, it adds an @supports not (aspect-ratio: 1) block that uses padding-top: <height ÷ width × 100>% and stretches the child with position: absolute; inset: 0. MDN lists @supports as Baseline widely available since September 2015.

Worked examples

Widescreen video. 16:9 gives aspect-ratio: 16 / 9;, decimal 1.7778, and padding-top: 56.25%; in the fallback.

A portrait social post. 1080x1350, fallback off: the simplified ratio is 4:5, decimal 0.8, and the CSS is aspect-ratio: 4 / 5;. The box is 125% as tall as it is wide.

A typo. abc returns “Enter a ratio such as 16:9, 4/3, 1920x1080 or 2.39.”

Common ratios

The tool lists these ratios with their CSS and fallback values:

Limits and tips

• Ratios only, no sizes. Set width or max-width yourself; the generated width: 100% fills the parent.
• A fixed height wins. If you also set both width and height, aspect-ratio is ignored.