AspectRatio 等比容器

按指定宽高比锁定容器尺寸的纯展示组件，支持预定义比例名（square/landscape/portrait/wide/ultrawide/golden）与分式/小数语法；宽度 100%、高度由比例推导，内容铺满并按比例裁切；无子内容时仍按比例占位。无事件。

基础用法

16/9 视频比例

16:9

示例代码

常见比例

4:3 / 1:1 / 21:9

4:3

1:1

21:9

示例代码

预定义比例名

ratio 支持六个预定义 token，名字映射常用比例（与分式/小数语法共存，token 名优先匹配）：

token	比例	token	比例
square	1 : 1	wide	16 : 9
landscape	4 : 3	ultrawide	21 : 9
portrait	3 : 4	golden	1.618 : 1

预定义 token 六档

square 1:1

landscape 4:3

portrait 3:4

wide 16:9

ultrawide 21:9

golden 1.618:1

示例代码

number 形式

ratio 也可通过 number property 赋值（el.ratio = 1.5），与字符串形式完全等价——在 Vue/React 中以 :ratio 绑定数字或直接赋 property 均走同一解析链路。

小数 / number property

ratio="1.5"（照片 3:2）

el.ratio = 1.5el.ratio = '16/9'el.ratio = 'golden'

number property 赋值（点击上方按钮切换）

示例代码

flex 容器内

oas-aspect-ratio 宽度跟随容器（:host 恒 width: 100%），高度按比例推导。在 flex 容器中作为 flex 子项时按 width: 100% 参与主轴分配（默认会被兄弟项压缩）；需要撑开时给宿主设 flex 属性（如 flex: 1）或显式宽度。

flex 容器中的表现

flex: 1

flex: 1

width 96px

示例代码

注意：不设 flex 属性/显式宽度时，flex 容器内多个 oas-aspect-ratio 的 width: 100% 基准会互相挤压——请始终给宿主设 flex 属性或显式宽度，保证宽度符合预期。

空内容占位

无子内容仍保比例（1:1）

示例代码

API

oas-aspect-ratio

属性

属性	说明	类型	默认值
ratio	宽高比：预定义名 square（1/1）/ landscape（4/3）/ portrait（3/4）/ wide（16/9）/ ultrawide（21/9）/ golden（1.618/1），或分式 16/9、4:3、16 / 9、小数 1.5；亦可用 property 赋 number（el.ratio = 1.5）。token 名优先匹配；缺失/非法（含 0 分子或分母）回退 1 / 1，非法值 dev 告警一次（同值去重）	string | number	—

插槽

名称	说明
默认	保持宽高比的内容

• 宿主宽度 100%，高度由 aspect-ratio 推导；内容经 absolute inset: 0 铺满并按比例裁切。
• 无子内容时宿主仍按比例占位。
• 无事件，纯展示。