Variants
- 16/9
- 1/1
- 4/3
- 3/2
- custom
Sizes
- auto
Example
<AspectRatio ratio={16 / 9}><img src={hero} className="object-cover" alt="Product hero" /></AspectRatio>Usage rule
Place media (img, video, iframe) inside; CSS handles ratio.
The full AspectRatio contract has 2 more rules, plus the do-not patterns. Get the full recipe.