Aspect Ratio
Constrains its content to a fixed width:height ratio so layout doesn't shift while media (images, video, embeds) loads.
Basic usage
Defaults to a 16:9 ratio.
16:9
vue
<AspectRatio>
<img src="/photo.jpg" alt="Description" class="w-full h-full object-cover" />
</AspectRatio>Custom ratio
Pass ratio as a number, e.g. 1 for a square or 4 / 3.
1:1
vue
<AspectRatio :ratio="1">
<img src="/avatar.jpg" alt="Avatar" class="w-full h-full object-cover" />
</AspectRatio>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 16 / 9 | Width/height ratio applied via the CSS aspect-ratio property |