Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Component Source Primitive API Reference

Installation ​

bash
npx shadcn-vue@latest add aspect-ratio

Usage ​

vue
<script setup lang="ts">
import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
</script>

<template>
  <AspectRatio>
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    >
  </AspectRatio>
</template>
Edit this page on GitHub