How does the aspect-ratio property work?

aspect-ratio accepts a ratio such as 16 / 9 or 1. The box uses it as a preferred ratio when at least one dimension is auto. If both width and height are explicitly set, the ratio has no room to influence the result.

.thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

.square {
  aspect-ratio: 1;
  width: 4rem;
}

Where it helps

• Reserving space for images and videos before they load
• Making square avatars or icon tiles
• Creating fixed-ratio media containers without padding-top hacks
• Combining with object-fit to control how replaced content fills the box
• Using auto in the ratio so the box can follow content in one dimension

For images, the ratio can also come from the intrinsic dimensions of the file. Setting aspect-ratio explicitly is still useful when the layout needs a consistent ratio regardless of the source image.