aspect-ratio必须配合width或max-width才能生效，单独使用会因缺乏宽度基准导致容器塌陷或异常拉伸；需包裹在块级容器中，配合object-fit控制内容显示，并为旧版Safari提供padding-top兜底。
aspect-ratio 必须配合 width 才能生效
单独写 aspect-ratio: 16 / 9 几乎一定失效——浏览器没宽度基准，算不出高度，容器可能塌成一条线或撑满全屏。它不是“设了就定比例”，而是“有宽才按比算高”。
必须显式声明宽度，常见组合如下：
-
width: 100%：用于响应式卡片、列表项等父容器宽度明确的场景 -
max-width: 400px：加宽度上限，防大屏下过宽，同时保留自适应能力 -
width: 20rem或width: min(100%, 600px)：结合相对单位或函数更灵活
⚠️ 避免同时写 height: 100% 或 min-height: 200px——这些会直接覆盖 aspect-ratio 的高度计算逻辑，导致比例锁死失败。
video 容器不能直接给 <video> 设 aspect-ratio
浏览器对替换元素（<video>、<img>）的 aspect-ratio 支持极弱，Safari 和部分 Android WebView 会静默忽略。强行写在 <video> 标签上，调试工具里样式可能显示生效，但实际渲染高度仍是默认 300×150 或由内联 width/height 决定。
立即学习“前端免费学习笔记（深入）”；
正确做法是套一层块级容器：
<div class="video-wrapper"> <video src="demo.mp4" controls></video> </div>
然后只对 .video-wrapper 设置：
width: 100%-
aspect-ratio: 16 / 9（按视频原始比例调整，如 4/3、21/9） -
overflow: hidden（防止object-fit: cover裁剪后边缘溢出）
<video> 自身只需：width: 100%; height: 100%; object-fit: cover; —— 它只负责填满这个已锁定比例的“框”。
Safari 15.3 及更早必须降级用 padding-top
@supports (aspect-ratio: 1 / 1) 在 Safari 15.0–15.3 中检测会返回 true，但实际不渲染 aspect-ratio，属于静默兼容失败。真机测试必现塌陷，CLS（累计布局偏移）飙升。
稳妥 fallback 结构：
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 → 9 ÷ 16 = 0.5625 */
height: 0;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}注意两点：
- 百分比值必须手算：4:3 是
padding-top: 75%，1:1 是100%，别混淆分子分母 - 不能把
aspect-ratio和padding-top写进同一个选择器——现代浏览器会优先用aspect-ratio，旧版 Safari 则依赖padding-top+height: 0的组合
object-fit 不配对，aspect-ratio 就白设
aspect-ratio 只管容器形状，不管里面内容怎么铺。如果只设了 aspect-ratio: 16 / 9 但没配 object-fit，<video> 或 <img> 仍会按自身固有宽高比拉伸或留黑边。
关键配对规则：
-
object-fit: cover：等比缩放后居中裁剪，填满整个容器——适合封面、背景视频 -
object-fit: contain：等比缩放后完整显示，四周留空——适合教学、产品图，需配background-color防空白难看 -
object-fit: fill：强制拉满，必变形，慎用
⚠️ 如果外层容器设了 overflow: hidden，而内部用了 cover，裁掉的部分就不可见——这不是 bug，是预期行为。检查是否误加了 max-height 或 min-width 等干扰样式，它们会破坏比例链的连贯性。
