AspectRatio
aspect-ratio比例容器 · CSS aspect-ratio 锁宽高比 + 图片/视频自动铺满(零依赖·RSC)
用法
16 / 9 宽屏
用 ratio 锁定宽高比，容器宽度变化时高度按比例自适应（常用于视频/封面）。
16 / 9
tsx
<div className="w-64">
<AspectRatio ratio={16 / 9}>
<img src="..." alt="..." />
</AspectRatio>
</div>1 / 1 正方形
ratio={1} 锁正方形，适合头像、缩略图、图标占位。
1 / 1
tsx
<div className="w-40">
<AspectRatio ratio={1}>
<img src="..." alt="..." />
</AspectRatio>
</div>竖向 3 / 4
ratio 小于 1 即竖向比例，适合人像卡片 / 海报。
3 / 4
tsx
<div className="w-40">
<AspectRatio ratio={3 / 4}>
<img src="..." alt="..." />
</AspectRatio>
</div>何时用
要把图片/视频/卡片锁成固定宽高比（16/9、1/1、4/3）、随宽度自适应高度且不抖动时用。它只锁比例（纯 CSS、可 RSC）；要按容器宽度重排布局用 Viewport，要把固定设计稿等比缩放铺满用 FitScreen。
导入
ts
import { AspectRatio } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| ratio | number | 1 | 宽高比（宽 / 高），如 16/9、1、4/3。 |
继承 HTMLAttributes<HTMLDivElement>。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 子元素（通常 img/video），自动铺满容器。 |
禁忌 / 坑
- `ratio` 是数字不是字符串：传
16 / 9这种除式或1.7778，不要传"16/9"。 - 宽度由外层给：容器宽度自适应父级，高度据 ratio 推导；外层不限宽时会撑满可用宽度。子元素无需自己写
w-full h-full，组件已让其铺满。
相关
Layout · AdminLayout · ScrollArea · Viewport · Resizable · FitScreen
Playground
ratio 1.78
<AspectRatio ratio={1.7778}>
<img src="..." alt="..." />
</AspectRatio>