aspect-ratio

Definition

The aspect-ratio property accepts a value in the form of a ratio, e.g., 16 / 9 for a 16:9 aspect ratio, commonly used for widescreen video. This property calculates the other dimension when one is set, maintaining the ratio.

Syntax

.media-card {
  aspect-ratio: 16 / 9;
}

Combine explicit ratios or the auto keyword to control how an element maintains its proportions.

Values

<ratio>: two positive numbers separated by /, such as 1 / 1, 4 / 3, or 16 / 9.
<number>: shorthand for <number> / 1, so 1.618 expresses the golden ratio.
auto: lets the browser infer the ratio from intrinsic dimensions (ideal for replaced elements).

Practical Examples

.gallery figure {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

The wrapper keeps a consistent frame while the inner image uses object-fit to avoid distortion.

HTML

aspect-ratio: 16 / 9

Maintains a 16:9 frame regardless of the image dimensions.

aspect-ratio: 3 / 4

Switching ratios lets you design portrait-friendly tiles.

Code

<div class="grid gap-6 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">aspect-ratio: 16 / 9</p>
    <div class="overflow-hidden rounded-md border border-slate-300 bg-slate-900/80" style="aspect-ratio: 16 / 9;">
      <img alt="Landscape" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80" class="h-full w-full object-cover" />
    </div>
    <p class="text-sm text-slate-600">Maintains a 16:9 frame regardless of the image dimensions.</p>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">aspect-ratio: 3 / 4</p>
    <div class="overflow-hidden rounded-md border border-slate-300 bg-slate-900/80" style="aspect-ratio: 3 / 4;">
      <img alt="Portrait" src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?auto=format&fit=crop&w=600&q=80" class="h-full w-full object-cover" />
    </div>
    <p class="text-sm text-slate-600">Switching ratios lets you design portrait-friendly tiles.</p>
  </div>
</div>

Tips & Best Practices

Pair with fixed widths or responsive constraints such as max-width to keep media predictable.
For media without intrinsic dimensions (for example placeholders), set the ratio to avoid layout shift.
When stacking mixed content, consider aspect-ratio: auto so text or form controls can dictate height.

Accessibility & UX Notes

Maintaining a stable aspect ratio helps prevent cumulative layout shift, reducing distractions for keyboard users and assistive technologies. Ensure interactive controls remain large enough once the ratio is applied.

Browser Support

Supported in all evergreen browsers (Chrome 88+, Edge 88+, Firefox 89+, Safari 14.1+). For older browsers, provide a fallback height mechanism such as the padding-top technique or intrinsic sizing wrappers.

object-fit and object-position for controlling how media fits within the frame.
max-width, min-height, and other sizing constraints that work alongside the ratio.
aspect-ratio pairs well with container queries for fully responsive media components.