shadcn-vue/apps/www/src/content/docs/components/aspect-ratio.md

title	description	source	primitive
Aspect Ratio	Displays content within a desired ratio.	apps/www/src/lib/registry/default/ui/aspect-ratio	https://www.radix-vue.com/components/aspect-ratio.html

Installation

npx shadcn-vue@latest add aspect-ratio

<template #Manual>

Install the following dependency:

npm install radix-vue

Copy and paste the following code into your project:

<script setup lang="ts">
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
    <AspectRatio :ratio="16 / 9">
      <img
        class="h-full w-full object-cover"
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape photograph by Tobias Tullius"
      >
    </AspectRatio>
  </div>
</template>

Update tailwind.config.js

Add the following to your tailwind.config.js file:

const { blackA } = require('@radix-ui/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./**/*.vue'],
  theme: {
    extend: {
      colors: {
        ...blackA,
      },
    },
  },
  plugins: [],
}

Usage

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

<template>
  <div class="w-[450px]">
    <AspectRatio :ratio="16 / 9">
      <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80">
    </AspectRatio>
  </div>
</template>