Aspect Ratio 纵横比

以期望的比例显示内容。通常用于嵌入图片、视频或地图。

组件特性

📐 比例控制：通过 ratio 属性设置内容的纵横比，支持 16/9、4/3、1 等常见比例。
📱 响应式布局：支持结合 Vue 响应式特性或 TailwindCSS 断点类实现不同屏幕尺寸下的比例切换。
🖼️ 媒体适配：常用于嵌入图片、视频或地图等需要固定比例的内容。
🎨 主题定制：圆角等样式默认继承自 BrConfigProvider 的全局配置。

简介

BrAspectRatio 组件基于 BrConfigProvider 实现全局主题配置，复刻了 shadcn-vue AspectRatio 的核心能力。它允许你通过简单的属性设置内容的纵横比，支持响应式布局和自定义样式。

基础用法

最简单的用法是指定 ratio 属性。常见的比例包括 16/9 (视频), 4/3 (标准), 1 (正方形)。

<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>

<template>
  <div class="w-[450px] overflow-hidden rounded-md border shadow-sm">
    <BrAspectRatio :ratio="16 / 9">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="h-full w-full object-cover"
      />
    </BrAspectRatio>
  </div>
</template>

自定义比例 (1:1)

你可以将比例设置为 1 (即 1:1) 来显示正方形内容。

<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>

<template>
  <div class="w-[300px] overflow-hidden rounded-md border shadow-sm">
    <BrAspectRatio :ratio="1">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="h-full w-full object-cover"
      />
    </BrAspectRatio>
  </div>
</template>

响应式比例切换

通过结合 Vue 的响应式特性或 TailwindCSS 断点类，你可以实现不同屏幕尺寸下的比例切换。

<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>

<template>
  <!-- Use class Control component visibility at different ratios for responsiveness -->
  <div class="w-full max-w-[450px] overflow-hidden rounded-md border shadow-sm">
    <BrAspectRatio :ratio="16 / 9" class="hidden md:block">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="h-full w-full object-cover"
      />
    </BrAspectRatio>
    <BrAspectRatio :ratio="4 / 3" class="block md:hidden">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="h-full w-full object-cover"
      />
    </BrAspectRatio>
  </div>
</template>

主题定制

BrAspectRatio 的样式（如圆角）默认继承自 BrConfigProvider 的全局配置。通过修改 radius 变量，你可以影响 AspectRatio 的圆角（如果应用了 rounded-[var(--radius)] 或相关类）。

<script setup lang="ts">
import { BrConfigProvider, BrAspectRatio } from '@breezeui/vue'
</script>

<template>
  <BrConfigProvider :theme="{ radius: 0.5 }">
    <!-- AspectRatio If internal uses rounded-md classes like，will automatically apply radius Configuration -->
    <div class="rounded-md overflow-hidden w-[450px] border shadow-sm">
        <BrAspectRatio :ratio="16 / 9">
          <img
            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
            alt="Photo by Drew Beamer"
            class="h-full w-full object-cover"
          />
        </BrAspectRatio>
    </div>
  </BrConfigProvider>
</template>

API

Props

属性名	类型	默认值	说明
ratio	`number`	`1`	纵横比 (宽 / 高)
asChild	`boolean`	`false`	是否作为子元素渲染 (Slot 模式)
class	`string`	`-`	自定义类名，支持 Tailwind 类

#Aspect Ratio 纵横比

#组件特性

#简介

#基础用法

#自定义比例 (1:1)

#响应式比例切换

#主题定制

#API

#Props