Aspect Ratio
Displays content within a desired ratio.
Installation
pnpm dlx shadcn-vue@latest add aspect-ratio Usage
vue
<script setup lang="ts"> import { AspectRatio } from '@/components/ui/aspect-ratio' </script> <template> <div class="w-[450px]"> <AspectRatio :ratio="16 / 9"> <img src="..." alt="Image" class="rounded-md object-cover w-full h-full"> </AspectRatio> </div> </template>