CSS Aspect-Ratio Property: A Visual Guide with Live Examples

The CSS aspect-ratio property lets you define the proportional relationship between an element’s width and height. Instead of setting both dimensions explicitly, you define the ratio and let the browser calculate the other dimension automatically.

This is useful everywhere – responsive images, video placeholders, card layouts, grid items, and skeleton loaders. If you’ve ever dealt with Cumulative Layout Shift (CLS) caused by images loading without reserved space, aspect-ratio is the modern fix.

What Does Aspect Ratio Mean?

An aspect ratio is the proportional relationship between width and height. You’ve probably seen these numbers before: 16:9 for widescreen video, 4:3 for older monitors, 1:1 for square images.

When you write aspect-ratio: 16 / 9 in CSS, you’re telling the browser: “for every 16 units of width, use 9 units of height.” The browser handles the math.

Here are the most common ratios you’ll encounter:

And two less common but still useful ones:

The Syntax

The property accepts a few value types:

/* Width / Height ratio */
.element {
  aspect-ratio: 16 / 9;
}

/* Single number (treated as ratio to 1) */
.square {
  aspect-ratio: 1;  /* same as 1 / 1 */
}

/* Auto - use the element's intrinsic ratio */
.natural {
  aspect-ratio: auto;
}

/* Auto with fallback ratio */
.image {
  aspect-ratio: auto 3 / 2;
}

The auto 3 / 2 syntax is worth noting. For replaced elements like <img> and <video>, it tells the browser to use the element’s natural ratio if available, and fall back to 3/2 if it isn’t (for example, while the image is still loading).

How It Works With Width and Height

The property only takes effect when at least one dimension is flexible. If you set both width and height explicitly, aspect-ratio has no effect.

/* This works - height is calculated from width + ratio */
.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  /* height = 300 * (9/16) = 168.75px */
}

/* This also works - width is calculated from height + ratio */
.tall {
  height: 200px;
  aspect-ratio: 4 / 3;
  /* width = 200 * (4/3) = 266.67px */
}

/* No effect - both dimensions are already set */
.fixed {
  width: 300px;
  height: 200px;
  aspect-ratio: 1 / 1;  /* ignored */
}

If both width and height are set, the explicit values win. The aspect-ratio is only used to calculate a missing dimension.

Practical Use Cases

Let’s walk through the scenarios where aspect-ratio makes a real difference.

Responsive Images Without CLS

Images without defined dimensions cause layout shifts when they load. Traditionally, we’d set width and height attributes on the <img> tag. With aspect-ratio, you can handle this entirely in CSS:

img {
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
}

The auto keyword tells the browser to use the image’s natural ratio once loaded. The 16 / 9 acts as a fallback while loading, reserving the right amount of space.

Video and Embed Placeholders

Embedded videos and iframes are notorious for causing layout shifts. You can use aspect-ratio to create a placeholder that reserves exact space:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1e27;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Here’s what that placeholder looks like:

This pattern works well with lazy-loaded embeds where the iframe loads only when the user interacts with the placeholder.

Grid Card Layouts

When building a CSS Grid layout with cards, you often want thumbnails or card items to maintain a consistent shape. Without aspect-ratio, you’d rely on padding hacks or fixed heights.

Try resizing your browser window – these grid items maintain their square ratio at any viewport width:

The CSS is minimal:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.grid-item {
  aspect-ratio: 1 / 1;
}

Skeleton Loaders

Skeleton screens (loading placeholders) need to match the final content dimensions closely. aspect-ratio makes this straightforward – the thumbnail placeholder matches the eventual image ratio:

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #1f2430 25%, #262c3a 50%, #1f2430 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Aspect Ratio vs. the Padding Hack

Before aspect-ratio existed, the standard workaround was the “padding-top hack.” You’d calculate the percentage from the ratio and apply it as padding:

/* Old padding hack for 16:9 */
.wrapper {
  position: relative;
  padding-top: 56.25%;  /* 9 / 16 = 0.5625 */
  height: 0;
}

.wrapper > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern approach */
.wrapper {
  aspect-ratio: 16 / 9;
}

The padding hack required a wrapper element, absolute positioning, and mental math to convert ratios into percentages. aspect-ratio does the same thing in one line.

If you still need to support Internet Explorer (which doesn’t support aspect-ratio), use the padding hack as a fallback. For all other browsers, aspect-ratio is safe to use.

Interaction With Object-fit

When using aspect-ratio on images, you’ll often pair it with the object-fit property. If the image’s natural dimensions don’t match the defined ratio, object-fit controls how the image fills the space:

img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;   /* crops to fill */
}

img.contain {
  object-fit: contain;  /* fits inside, may show gaps */
}

object-fit: cover is the most common choice – it fills the entire space while cropping any overflow. contain fits the image inside without cropping, but may leave empty areas.

Browser Support

aspect-ratio has been part of the CSS Baseline since September 2021. All major browsers support it:

• Chrome/Edge: version 88+ (2020)
• Firefox: version 89+ (2021)
• Safari: version 15+ (2021)

Global browser support is above 96%. The only browser that doesn’t support it is Internet Explorer, which reached end of life in June 2022.

FAQs

Common questions about the CSS aspect-ratio property:

Summary

The CSS aspect-ratio property replaces years of padding hacks with a single, readable declaration. It works for images, videos, grid items, skeleton loaders, and any element where you need consistent proportions. With over 96% browser support, there’s no reason not to use it in production today. For animatable custom properties and gradient effects, see the CSS @property guide.