宽高比布局
元素的宽和高之间保持的比例,窗口变化时按这个比例一起缩放,而不是各缩各的。
- 宽和高要按比例
- 十六比九那种
- 缩放的时候别变形
- 宽高比
- 长宽比
- 纵横比
示例
aspect-ratio: 16 / 9;
Web / iOS / Android 对照
Web原生支持
平台通用范围
aspect-ratio
CSS: aspect-ratio
官方定义是「允许你定义元素盒子期望的宽高比」—— 是一个期望值,最终尺寸仍受其他尺寸属性约束。只声明比例,不涉及内容如何填充,这一点与 iOS 不同。
iOS原生支持
平台通用范围
aspectRatio
也叫 aspectRatio(_:contentMode:)
SwiftUI: View.aspectRatio(_:contentMode:)
官方描述是「把这个视图的尺寸约束到指定的宽高比」。与 CSS 的关键差别是 contentMode 不是可选的:官方把它写成「一个标记,指示这个视图是 fit 还是 fill 父级上下文」—— 光给比例不够,还必须说清是装进去还是填满。比例传 nil 表示沿用当前比例。
Android原生支持
平台通用范围
aspectRatio
也叫 Modifier.aspectRatio
Compose: Modifier.aspectRatio(ratio, matchHeightConstraintsFirst)
官方措辞是「尝试」把内容尺寸匹配到指定比例,并逐条列出尝试顺序:maxWidth、maxHeight、minWidth、minHeight。也就是说结果取决于父级传下来的约束,不是无条件成立;matchHeightConstraintsFirst 用来把这个顺序倒过来。三端里只有它把解析顺序写进了文档。
使用规范
什么时候用
- 图片、视频、封面需要在不同宽度下保持同一形状时
- 占位区域要在内容加载前就撑出正确形状时
什么时候别用
- 内容高度由文字多少决定,强行锁比例会截断或留白时
- 只想限制最大高度 → 直接写高度上限,不要绕道比例
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。