CSS aspect-ratio Property

What You’ll Learn

The aspect-ratio property lets you lock an element’s width-to-height proportion. It is especially useful for videos, images, cards, and embeds that should stay visually consistent on every screen size.

Definition and Usage

The aspect-ratio CSS property defines a preferred width-to-height ratio for a box. When you set only the width (or only the height), the browser can calculate the missing dimension so the element keeps that shape.

This is particularly helpful for media layouts. A video wrapper can stay widescreen at 16 / 9, a profile photo can stay square at 1 / 1, and a gallery tile can stay at 4 / 3 even when the page reflows on mobile.

📝 Syntax

Write aspect-ratio with a ratio value or the keyword auto:

selector {
  aspect-ratio: <ratio> | auto;
}

Basic Example

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #e2e8f0;
}

Syntax Rules

• Use a width/height ratio such as 16 / 9, 4 / 3, or 1 / 1.
• You can also use a decimal number such as 1.5, which equals a 3 / 2 ratio.
• Spaces around the slash are optional, but 16 / 9 is easier to read for beginners.
• The keyword auto restores natural sizing based on content or other properties.
• aspect-ratio works best when combined with a defined width or max-width.

Default Value

The initial value of aspect-ratio is auto. That means the browser uses the element’s natural content dimensions or explicit width and height values unless you set a ratio yourself.

💎 Property Values

These are the value types you will use most often with aspect-ratio.

Common Use Cases

aspect-ratio is widely used anywhere layout stability and consistent proportions matter:

• Video wrappers — Reserve space for <video> or embedded players before they load.
• Responsive images — Pair with object-fit: cover so photos fill a frame without stretching.
• Cards and thumbnails — Keep a grid of preview tiles visually aligned.
• Iframes and embeds — Maintain predictable embed height on mobile and desktop.
• Placeholder blocks — Prevent layout shift while content is loading.

aspect-ratio vs the Old Padding Hack

Before aspect-ratio, developers often used a percentage-based padding-top trick. The modern property is simpler and easier to read.

Examples Gallery

Try aspect-ratio with a video container, square avatar, responsive photo, and card grid.

<style>
  .video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: lightgray;
  }
</style>

<div class="video-container">
  <!-- Video or iframe goes here -->
</div>

.avatar {
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #14b8a6;
}

.photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media {
  aspect-ratio: 3 / 2;
  background: #6366f1;
}

💡 Best Practices