纵横比

以所需比例显示内容。

组件源代码 原生 API 参考
Photo by Drew Beamer

安装 ​

bash
npx shadcn-vue@latest add aspect-ratio

使用 ​

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">
    </AspectRatio>
  </div>
</template>
在 GitHub 上编辑此页面