Aspect ratio

Holds a box to a ratio so media never shifts layout while it loads. Wrap the image or embed, set the ratio, and give the child size-full object-cover; the wrapper carries the radius and clips the media to it.

<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
  <img src="…" className="size-full object-cover" />
</AspectRatio>

1 / 1

In a card

The image is the card's first DOM child, not the aspect-ratio wrapper, so the card's rounded-nested corner rule still targets it.

In a card

16 / 9, held with the same Tailwind ratio AspectRatio uses under the hood.