Syntax and basic usage

The property accepts a ratio: aspect-ratio: 16 / 9. The element will try to maintain this ratio as its size changes. Set width: 100% and the height adjusts automatically. For square elements: aspect-ratio: 1 / 1 (or just aspect-ratio: 1). You can also use decimal values: aspect-ratio: 1.7778. The auto keyword (aspect-ratio: auto) uses the element's intrinsic ratio — useful for images that should keep their natural proportions with auto as a fallback: aspect-ratio: auto 16 / 9.

/* CSS aspect-ratio property */

/* Basic usage */
.video { aspect-ratio: 16 / 9; width: 100%; }
.square { aspect-ratio: 1; width: 200px; }
.photo { aspect-ratio: 4 / 3; }

/* Responsive video embed */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

/* Card with fixed ratio */
.card-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

/* Browser support: 95%+ (Chrome 88+, Firefox 89+, Safari 15+) */
/* Fallback: padding-top hack */
.fallback { padding-top: 56.25%; /* 9/16 = 0.5625 */ }

Common patterns

Responsive video container: .video-container { aspect-ratio: 16 / 9; width: 100%; } with the iframe or video filling it via position: absolute and inset: 0. Image card grid: set aspect-ratio: 3 / 2 on the img element with object-fit: cover to create uniform image grids. Hero section: aspect-ratio: 21 / 9 for a cinematic banner that scales with viewport width. Avatar circle: aspect-ratio: 1 with border-radius: 50%.

Browser support and fallbacks

aspect-ratio is supported in Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+ (since early 2021). For older browsers, use the padding-top fallback: .container { position: relative; padding-top: 56.25%; } .container > * { position: absolute; inset: 0; }. The 56.25% comes from 9/16 × 100. Use @supports (aspect-ratio: 1) { ... } to progressively enhance. For images, setting width and height HTML attributes gives the browser the intrinsic ratio for layout calculation even before CSS loads.