Aspect Ratio
Displays content within a fixed, desired width-to-height ratio.
16 : 9
1 : 1
3 : 4
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/aspect-ratio.jsonUsage
Use aspect ratio to constrain media like images, videos, or embeds so they scale predictably
without layout shift. Pass the desired ratio via the ratio prop and size the content to fill it.
<script setup lang="ts">
import { AspectRatio } from "@/components/ui/aspect-ratio";
</script>
<template>
<AspectRatio :ratio="16 / 9" class="bg-muted rounded-lg">
<img
src="/images/photo.jpg"
alt="A scenic landscape"
class="h-full w-full rounded-lg object-cover"
/>
</AspectRatio>
</template>
Built on reka-ui's Aspect Ratio.