Lzh on GitHub

Aspect Ratio

按所需比例显示内容。
<script setup lang="ts">
import { AspectRatio } from 'reka-ui'
</script>

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

功能特点

  • 接受任何自定义比例。

安装

从命令行安装组件。

$ npm add reka-ui

结构

导入组件。

<script setup>
  import { AspectRatio } from 'reka-ui'
</script>

<template>
  <AspectRatio />
</template>

API 参考

Root

包含您想要约束为给定比例的内容。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
ratio1number所需的比例。例如：16/9

默认插槽

Payload类型描述
aspectnumber当前纵横比（百分比）