Aspect Ratio 纵横比

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

简介

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

基础用法

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

Example

自定义比例 (1:1)

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

Example

响应式比例切换

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

Example

主题定制

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

Example

API

Props

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