基础

Aspect Ratio 比例容器

用于比例容器场景的 MoriUI 组件。

资源

导入

import { AspectRatio } from 'moriui'

RTL

比例计算与文字方向无关；在 RTL 容器中，内部内容继续继承正确的 dir 语义。

示例

概览

以 16:9 比例展示常见横向媒体。

16:9 横向封面

<script setup lang="ts">
  import { AspectRatio } from 'moriui'
</script>

<template>
  <AspectRatio :ratio="16 / 9" class="mx-auto w-full max-w-sm overflow-hidden rounded-xl bg-muted">
    <div class="flex h-full items-center justify-center bg-gradient-to-br from-muted to-secondary text-sm text-muted-foreground">
      16:9 横向封面
    </div>
  </AspectRatio>
</template>

方形

ratio=1 创建稳定的正方形区域。

1:1 方形封面

<script setup lang="ts">
  import { AspectRatio } from 'moriui'
</script>

<template>
  <AspectRatio :ratio="1" class="mx-auto w-full max-w-sm overflow-hidden rounded-xl bg-muted">
    <div class="flex h-full items-center justify-center bg-gradient-to-br from-muted to-secondary text-sm text-muted-foreground">
      1:1 方形封面
    </div>
  </AspectRatio>
</template>

竖向

ratio=9/16 适合竖向封面。

9:16 竖向封面

<script setup lang="ts">
  import { AspectRatio } from 'moriui'
</script>

<template>
  <AspectRatio :ratio="9 / 16" class="mx-auto w-full max-w-sm overflow-hidden rounded-xl bg-muted">
    <div class="flex h-full items-center justify-center bg-gradient-to-br from-muted to-secondary text-sm text-muted-foreground">
      9:16 竖向封面
    </div>
  </AspectRatio>
</template>

RTL

比例容器可安全放入 RTL 页面。

9:16 من اليمين

<script setup lang="ts">
  import { AspectRatio } from 'moriui'
</script>

<template>
  <AspectRatio :ratio="9 / 16" class="mx-auto w-full max-w-sm overflow-hidden rounded-xl bg-muted">
    <div dir="rtl" class="flex h-full items-center justify-center bg-gradient-to-br from-muted to-secondary text-sm text-muted-foreground">
      9:16 من اليمين
    </div>
  </AspectRatio>
</template>

API

属性	类型	默认值	说明
AspectRatio ratio	`number`	`1`	目标宽高比，例如 16 / 9。
AspectRatio as	`string \| Component`	`'div'`	内部承载内容的元素或组件。
AspectRatio asChild	`boolean`	`false`	将内部原语行为合并到唯一子元素。

无障碍说明

比例容器只负责布局，不改变内容语义。媒体仍需提供 alt，纯装饰内容应使用空 alt 或合适的隐藏方式。

关联组件

内容卡片