video元素直接设aspect-ratio无效，因其是替换元素，宽高比由视频元数据决定，CSS规范明确不支持；必须用块级容器包裹并设width、aspect-ratio和object-fit，否则高度塌陷或CLS跳动。
video元素直接设aspect-ratio为什么没反应？
浏览器会忽略video { aspect-ratio: 16 / 9 }，因为video是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 规范明确不作用于它。常见现象是容器高度坍缩为 0，或视频只显示左上角一小块。
必须用一层 <div> 包裹 <video>，把 aspect-ratio 写在容器上——这是所有现代方案的起点，不是可选项。
容器加了aspect-ratio但视频还是拉伸或留黑边
aspect-ratio 只管容器盒子的宽高比，不管内容怎么填满它。漏掉下面任意一项，都会出问题：
-
width: 100%或max-width: 100%：没有宽度约束，比例就失去计算基准 -
object-fit: cover或object-fit: contain：否则视频按原始分辨率强行拉伸填充 -
overflow: hidden（尤其用cover时）：防止裁剪边缘溢出容器边界 -
height: auto（可选但推荐）：语义更明确，避免被其他规则意外覆盖
典型安全组合：.video-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; }
立即学习“前端免费学习笔记（深入）”；
如何兼容 Safari 15.3 及更老版本？
Safari 15.0–15.3 会静默忽略 aspect-ratio，真机测试不可省。不能靠 JS 检测后插入样式，得用 CSS 原生降级：
- 用
@supports not (aspect-ratio: 1)包裹 fallback 规则，确保新浏览器不执行旧逻辑 - 外层容器必须设
position: relative; width: 100%; height: 0;——height: 0缺一不可，否则padding-bottom不生效 -
padding-bottom: 56.25%（16:9）、75%（4:3）等值必须精确到小数点后两位，少一位就偏形 - 内部
video必须设position: absolute; top: 0; left: 0; width: 100%; height: 100%
注意：如果同时写了 aspect-ratio 和 padding-bottom 在同一选择器里，Safari 15.4+ 可能因解析冲突导致高度异常。
移动端真机测试最容易翻车的三个点
实际部署时，问题往往不出在比例本身，而在细节链断裂：
-
poster图片尺寸必须匹配视频比例，否则加载瞬间黑边错位，用户第一眼就感知“不专业” - 多分辨率源要用
<source>+media属性声明，而不是靠 JS 切换——首帧仍可能拉伸，因为浏览器按首个<source>加载并渲染 - iOS 上必须加
playsinline和webkit-playsinline属性，否则点击就全屏，破坏页面流式体验
这些点都不在 aspect-ratio 文档里写，但每个都足以让自适应失效。
