The aspect-ratio property keeps an element’s width and height in a fixed ratio, so it stays in proportion at any size without padding hacks or media queries.

.card {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
}

This card can shrink or grow anywhere from full width down to 200px, and it always stays a perfect square. You never set the height by hand. The browser works it out from the ratio.

How the ratio works

aspect-ratio takes two numbers, written as width / height.

• aspect-ratio: 1 or aspect-ratio: 1 / 1 makes a perfect square.
• aspect-ratio: 16 / 9 makes a widescreen shape, the same ratio as most videos.
• aspect-ratio: 4 / 3 makes an older, boxier shape.

You only need to set one dimension yourself, usually width. The browser calculates the other one from the ratio. Set a 300px-wide box with aspect-ratio: 16 / 9, and the browser makes the height 168.75px on its own.

Why this replaces the old padding hack

Before aspect-ratio existed, keeping a box in proportion meant a trick like this:

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 9 / 16, written as a percentage */
}

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

That worked, but it took two elements, a percentage you had to calculate by hand, and absolute positioning just to hold a shape. aspect-ratio does the same job in one line, on one element, with a value that actually reads as a ratio instead of a percentage.

What happens when content is too tall

Here’s the part most guides skip. aspect-ratio sets the shape of the box. It does not hide anything that doesn’t fit inside that shape.

If a card holds a heading and a few lines of text, and that text is taller than the ratio allows, the content pushes past the bottom of the box instead of being cut off. aspect-ratio does not clip content by default.

.card {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  overflow: hidden;
}

Add overflow: hidden if you want the box to stay locked to its ratio no matter how much content goes inside it. Without it, a square avatar box is safe because an image always fills its box, but a square card holding text can grow taller than square the moment the text wraps to an extra line.

Keep HTML width and height when you have them

If you know an image’s natural dimensions, keep the width and height attributes in the HTML too. Browsers use those attributes to infer the intrinsic ratio before the file loads, which helps reserve the correct space early.

Use CSS aspect-ratio when you want a different crop box than the file’s natural shape, when the element is not an image at all, or when the same media needs to fit several reusable layouts.

Combining with object-fit for images

On an actual <img> or <video> element, pair aspect-ratio with object-fit so the media fills the box without stretching:

.avatar {
  width: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

object-fit: cover crops the image to fill the box while keeping its own proportions. Without it, an image with a different natural shape than your ratio would stretch and look distorted.

One more reason to use it: fewer layout jumps

Setting aspect-ratio on an image reserves its space on the page before the image finishes loading. Without it, the page has no height for that image yet, so everything below it jumps down the moment the image loads in. This jump is called Cumulative Layout Shift, and aspect-ratio is one of the simplest ways to prevent it.

Browser support

aspect-ratio works in every modern browser and has for several years now. There’s no real reason to avoid it in production today.

Related patterns

aspect-ratio handles proportions, but it’s often used alongside other responsive CSS patterns too. clamp() handles fluid text and spacing, auto-fit with minmax() handles column count in a grid, and the Flexbox wrapping pattern pairs especially well with aspect-ratio on each card.

For a single media box or card that should shrink and stop growing, use width with max-width for responsive CSS widths. You can also read the full guide to responsive CSS without media queries.

You can browse more frontend visuals and CSS examples.

Wrap-up

aspect-ratio locks a box to a shape with one line of CSS, no padding math and no extra wrapper element. Just remember it only sets the shape. Add overflow: hidden if the content inside might grow taller than that shape allows.

For more short, visual frontend lessons, visit WebDevVisuals.