长宽比

以所需比例显示内容。

<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>

功能

• 接受任何自定义比例。

安装

从命令行安装组件。

$ npm add radix-vue

解剖

导入组件。

<script setup>
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <AspectRatio />
</template>

API 参考

根

包含您想要限制在给定比例的内容。

属性	默认	类型
as	'div'	AsTag | 组件 此组件应渲染为的元素或组件。可以被asChild覆盖。
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的组合指南以了解更多详细信息。
ratio	1	数字 所需的比例。例如：16/9

插槽 (默认)	有效载荷
aspect	数字 当前长宽比（以 % 为单位）