aspect-ratio

aspect-ratio

Keep boxes at a fixed width-to-height relationship, no matter the content.

The property

aspect-ratio: width / height:

.card {
  width: 200px;
  aspect-ratio: 16 / 9;    /* height = 112.5px */
}
.video-box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Why modern

Old trick: padding-top: 56.25% on a child. Today just aspect-ratio: 16/9.

Useful ratios

• 16 / 9, widescreen video
• 4 / 3, classic video/photo
• 9 / 16, vertical phone content
• 1 / 1, perfect squares (avatars!)

Square avatar

.thumb {
  width: 80px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

Behavior

• Only fixes the relationship when ONLY one dimension is set by you (the other follows).
• If both width and height are set, the ratio is ignored.

TL;DR

• aspect-ratio: 16/9 gives a width-to-height ratio.
• Clean replacement for the old padding-top hack.
• 1/1 is perfect for squares and avatars.
• Set only one dimension so the other derives from the ratio.