aspect-ratio 不能直接用于 元素，因其是替换元素，宽高比由视频元数据决定，CSS 属性被浏览器静默忽略；必须用块级容器包裹，设置 width 和 aspect-ratio，并配合 object-fit 与 overflow: hidden 才能正确生效。
aspect-ratio 不能直接写在 <video></video> 上——写了也白写，浏览器会静默忽略，高度塌陷、CLS 跳动、横竖屏错位全是必然结果。
为什么 video { aspect-ratio: 16 / 9 } 完全无效
因为 <video></video> 是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不参与计算。DevTools 里该声明常标为 “inactive”，computed height 多为 auto 或 0px。
- 页面加载瞬间高度为 0，下方内容突然下移（CLS）
- 视频被横向压成一条细线，或上下留大片空白
- Safari 15.4–16.3 在
display: flex父容器中会彻底忽略该属性
必须用块级容器包裹并设 aspect-ratio + width
核心三要素缺一不可：包裹容器、显式宽度约束、object-fit 填充控制。
- HTML 结构必须是
<div class="video-wrapper"><video></video></div>，不能省略外层<div> <li> <code>.video-wrapper必须设display: block或display: grid；避免嵌套在display: flex父容器中（Safari 兼容性 bug） - 必须写
width: 100%或max-width: 100vw——aspect-ratio只定义比例，不提供尺寸基准 - 务必移除
<video></video>标签上的width和heightHTML 属性（如width="640"），否则覆盖 CSS 控制 -
video必须设width: 100%+height: 100%，才能填满容器区域 - 推荐
object-fit: cover（裁边填满）或object-fit: contain（完整居中），按需选择 - 容器必须加
overflow: hidden，防止cover模式下边缘内容溢出 - 若容器是
position: relative，可给video加position: absolute; inset: 0，确保严丝合缝 - 错误写法：新旧样式平级写，旧浏览器回退到无约束状态，CLS 更严重
- 正确写法：
@supports (aspect-ratio: 1 / 1)包裹现代方案；@supports not (aspect-ratio: 1 / 1)包裹padding-bottom: 56.25%+position: relative/absolute降级 - 分数必须写
16 / 9，不是16:9（非法）或1.777（精度误差易引发 1px 裁切） - 动态比例可用
aspect-ratio: attr(data-ratio)，但注意 Safari 对该语法支持有限，建议 fallback 到类名控制
object-fit 和 overflow 必须配套使用
aspect-ratio 管容器盒子尺寸，object-fit 管视频内容如何填充这个盒子——两者解决的是不同层级的问题。
立即学习“前端免费学习笔记（深入）”；
@supports 降级必须分层写，不能平铺
Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好，但 iOS 15.2 或更早版本会完全忽略 aspect-ratio，导致容器高度为 0。
最容易被忽略的点是：没有 width 就算 aspect-ratio 写对了也没法推导高度；而漏掉 overflow: hidden 或 object-fit，会导致比例“看起来对了”，实际播放时边缘溢出或拉伸变形。
