July 10, 2026 in CSS, HTML

The CSS aspect-ratio Property: Finally, a Simple Fix

You must have used the padding-top hack at some point. If you have been writing CSS for a few years, you will remember it well. It used to work fine, but it always felt like a temporary fix, something we did because there was no proper solution at the time.

We don’t need that workaround anymore. The aspect-ratio property solves this problem properly, in just one line.

Why We Even Needed a Hack in the First Place

Before aspect-ratio came along, if you wanted a fluid element to stay in a fixed shape, say a 16:9 video that resizes as per the screen, you had to write something like this:

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* this is 16:9, don't ask why */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This works, but it’s confusing if you don’t already know the trick. It uses the fact that padding given as a percentage is calculated from the width of the parent element, not the height. Once you know that, it makes sense. Until then, it just looks like magic numbers copied from a Stack Overflow answer. And you still need an extra wrapper div plus absolute positioning to make it work at all.

The Actual Fix

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

One line. No wrapper div required.

You can also write a single number instead of a ratio, and CSS will treat it as width divided by height:

.square {
  aspect-ratio: 1; /* same as 1 / 1 */
}

There are a few ways to use this property:

• <ratio> — two numbers with a slash, like 4 / 3
• auto — the element uses its own natural ratio, this is the default for something like <img>
• auto <ratio> — use the natural ratio if it’s known, otherwise fall back to the ratio you’ve given

That last one is more useful than it sounds, and I’ll get to why in a bit.

Where This Actually Helps

Video that doesn’t need any positioning tricks

<div class="video-container">
  <iframe src="<https://example.com/embed>" frameborder="0"></iframe>
</div>

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

The container stays at 16:9 no matter the screen width, and the iframe just fills whatever space it’s given.

Thumbnails that stay square even when your images don’t cooperate

Every image gallery has this problem. Some photos are portrait, some are landscape, and somebody on the team always uploads one giant panorama that breaks the layout.

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Combine aspect-ratio with object-fit: cover and the browser crops each image to fit the square without stretching it.

Card grids that don’t fall apart

If you’re building a grid of cards, the image area needs to look consistent even if your content team keeps uploading photos of random sizes.

.card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}

<div class="card">
  <img class="card-image" src="photo.jpg" alt="Description">
  <h3>Card Title</h3>
  <p>Card description text.</p>
</div>

Every image now locks to a 3:2 ratio, so the grid stays aligned regardless of what gets uploaded.

Using the real image size, but only once it’s actually loaded

This is where auto <ratio> becomes genuinely useful. Say you want an image to use its real dimensions once it loads, but you don’t want the page jumping around while it’s still loading.

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

Basically, once the browser knows the image’s real size, it uses that. Until then, it reserves a 16:9 slot so nothing else on the page has to jump. This matters more than people realize, because it directly affects your Cumulative Layout Shift score, one of the metrics under Core Web Vitals. It’s an easy thing to fix now and an annoying thing to fix later once your pages are already live.

Placeholder boxes, skeleton loaders, map embeds

.map-embed {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 21 / 9;
  background: #e0e0e0;
}

Same idea, just applied to any box that needs to hold its shape before real content shows up.

A Few Things That Can Trip You Up

• If you set both width and height on an element, aspect-ratio is ignored. Makes sense, since the box is already fully defined at that point, there’s nothing left for the ratio to do.
• min-height or max-height can override the ratio if they conflict with it. The ratio adjusts or gets dropped depending on which constraint wins.
• It works inside flexbox and grid layouts too, mostly. Sometimes the container stretches the item and the ratio doesn’t show up the way you expect. If that happens, try align-self: start on the item to stop it from stretching.
• aspect-ratio only controls the shape of the box, not what’s inside it. If your content is bigger than the box allows, it will overflow unless you handle it separately with overflow: hidden or min-height: 0.

What About Old Browsers?

You don’t need to worry much. Chrome, Firefox, Safari, and Edge have all supported aspect-ratio since around 2021, so it’s been usable in production for a while now. If you still need to support something like IE11, you’ll have to fall back to the padding hack for that one case. Otherwise, there’s no real reason to avoid using it directly.

Quick Reference

At the end of the day, this is one property replacing what used to take an extra div and a bit of guesswork. Worth using it directly if your project allows it.