CSS: aspect-ratio

The aspect-ratio property defines a preferred width-to-height ratio for an element.

Basic example

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee;
}

When the width changes, the preferred height follows the ratio. This helps prevent layout jumps while a video or image is loading.

Card image example

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

aspect-ratio controls the box shape. object-fit controls how replaced content such as an image fits inside that box.

Common mistakes

• Do not set conflicting fixed width and height values and expect the ratio to control both.
• Choose a ratio that matches the content or use object-fit intentionally when cropping.
• Test narrow screens so the box does not overflow its container.