video上直接写aspect-ratio: 16 / 9无效，因其是替换元素，浏览器按固有宽高比渲染并忽略该声明；必须用div包裹并设aspect-ratio、width: 100%、max-width及object-fit，同时移除内联宽高属性。
video 上直接写 aspect-ratio: 16 / 9 为什么没反应
因为 video 是替换元素（replaced element），浏览器会忽略对其设置的 aspect-ratio，哪怕语法完全正确。常见现象是容器高度塌陷为 0，或视频被横向拉伸成一条线。这不是你写错了，而是规范限制——aspect-ratio 对 video、iframe 等替换元素不生效。
必须用一层 <div class="video-wrapper"> 包裹 <video>，把 aspect-ratio: 16 / 9 写在 wrapper 上。否则所有后续样式都会失效。
-
video标签里不能有内联width或height属性（如width="640"），否则会覆盖 CSS 控制 - 语法只能是
16 / 9，不能写成16:9或1.777 - wrapper 必须是块级容器：推荐
display: block或display: grid；避免放在display: flex的父容器中——Safari 15.4–16.3 会直接忽略其aspect-ratio
如何让容器既响应式又不撑爆屏幕
只写 aspect-ratio: 16 / 9 不够，它只管比例，不管尺寸上限。大屏下可能无限拉宽，破坏版式。
必须加 max-width 限制宽度上限，并配 width: 100% 保证小屏收缩：
立即学习“前端免费学习笔记（深入）”；
.video-wrapper { aspect-ratio: 16 / 9; width: 100%; max-width: 800px; }-
max-width值建议按内容密度定：文章内嵌常用720px～800px；全屏横幅可用100vw配合margin: 0 auto - 绝对不要给 wrapper 设
height，否则会与aspect-ratio冲突，导致高度计算异常
object-fit 加了也没变化？原因和写法
object-fit 只在“父容器有明确宽高”的前提下才起作用。如果 wrapper 高度靠内容撑开（比如默认 display: block 且没设 aspect-ratio），那 object-fit 就无从裁剪。
确保两件事同时成立：
- wrapper 有确定高度：靠
aspect-ratio或padding-top + height: 0提前占位 -
video自身设width: 100%和height: 100%，否则即使object-fit生效，也可能只显示左上角一小块 - 推荐
object-fit: cover（填满裁边）；需要完整显示用object-fit: contain
兼容旧浏览器的降级方案怎么写
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，但 Safari 15.3 及更早版本完全不支持。不能只靠一个属性赌兼容性。
稳妥做法是双轨并行：
- 主逻辑用
aspect-ratio: 16 / 9，现代浏览器直接生效 - 对不支持的环境，用
@supports not (aspect-ratio: 1)注入 fallback：.video-wrapper { position: relative; }.video-wrapper::before { content: ""; display: block; padding-top: 56.25%; }.video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -
padding-top: 56.25%必须精确——9 / 16 = 0.5625，写成56%或56.2%都会导致比例偏移
height: auto 回退——所有尺寸逻辑必须由 CSS 原生属性在首帧渲染前完成。 
