Aspect ratio (CSS)

The aspect-ratio CSS property sets the proportion between an element's width and height, for example 16 by 9 for a video or 1 by 1 for a square. The browser keeps that shape as the element resizes, which is essential for responsive images, videos, cards and embeds that must not distort or shift the layout.

How the property works

You write the ratio as two numbers separated by a slash. If only one dimension is set, the browser computes the other from the ratio.

• aspect-ratio: 16 / 9; with width: 100%; gives a full-width 16:9 box.
• aspect-ratio: 1; is shorthand for a perfect square.
• A set height or an intrinsic content size can override the computed dimension, so pair it with a single fixed dimension for predictable results.

Common ratios

A small set of ratios covers most interfaces.

Layout stability and Core Web Vitals

Reserving space with a fixed ratio prevents layout shift while an image or video loads. That directly improves Cumulative Layout Shift (CLS), one of the Core Web Vitals Google uses as a ranking signal, because the surrounding content does not jump when the media finally appears.

Using aspect-ratio with images

Set aspect-ratio plus a width on an image and add object-fit: cover; so the picture fills the box and crops instead of stretching. This keeps a gallery tidy even when source images have mixed dimensions, and it pairs well with the width and height attributes that let the browser reserve space before CSS loads.

The old padding hack and browser support

Before this property, developers faked ratios with a padding-top percentage trick and absolute positioning, which was verbose and easy to break. The native aspect-ratio replaces that with one clear line and is supported across all modern browsers, so the hack is no longer needed on current projects.

Aspect ratio at BeBranded

At BeBranded we lock media to consistent ratios so galleries and cards stay tidy and pages do not shift as they load, which protects both the design and the Core Web Vitals. It is part of the stable, polished front-end in our design work.