aspect-ratio

aspect-ratio supplies a preferred width-to-height ratio used in automatic sizing. It does not force every box to keep that ratio regardless of explicit dimensions or content constraints.

Let width determine height

The box has a 160px width and an automatic height. A 2/1 ratio makes its preferred height 80px.

<div class="frame">A 2:1 box</div>

.frame {
  width: 160px;
  aspect-ratio: 2 / 1;
  background: #dbeafe;
}

A fluid media frame

This frame uses the available width up to a maximum, and its background fills a predictable ratio. Replace the background with a real image only after choosing appropriate alternative text.

<div class="media" aria-hidden="true"></div>
<p>A decorative media frame with a 16:9 preferred ratio.</p>

.media {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #dbeafe, #2563eb);
  border-radius: 0.5rem;
}

Values and sizing rules

The initial value is auto and aspect-ratio is not inherited. A ratio such as 3/2 or a single number (equivalent to number/1) provides a preferred ratio. With auto and a ratio together, replaced elements such as loaded images use their natural ratio; otherwise the specified ratio can apply.

At least one size must be automatic for the ratio to determine that size. Explicit width and height, minimums, maximums, and content sizing can override the preferred proportion. Box-sizing determines the box used for an explicit ratio; natural replaced-element ratios use the content box.

Common mistakes

Object-fit belongs on the image, not an ordinary figure wrapper. Use object-fit and object-position to crop within an actual image box. Avoid fixed ratios that clip text or controls; the ratio is best suited to content with a meaningful proportional frame.

Sources and browser support

MDN: aspect-ratio describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.