Use cases
- Responsive images — maintain consistent aspect ratios across screen sizes.
- Video embeds — prevent layout shift before the video loads.
- Card thumbnails — uniform grid appearance in masonry or grid layouts.
When NOT to use
- Fixed-size containers where the dimensions are known — use explicit width/height.
- Text-only content that should grow to fit — AspectRatio constrains height, which clips overflow.
Common ratios
| Name | Value | Use case |
|---|---|---|
| Square | 1 | Avatar, icon containers |
| 4:3 | 4 / 3 | Classic photo/video |
| 16:9 | 16 / 9 | Widescreen video, hero images |
| 21:9 | 21 / 9 | Ultrawide banners |
Composition
- Child content fills the container. Use
object-coveron images to crop,object-containto letterbox. - Nest inside a Card for consistent thumbnail grids.
- Combine with Skeleton as the child for a loading placeholder that preserves layout.