aspect-ratio 不能直接写在 video 元素上，因其为替换元素，固有宽高比由视频元数据决定，css 的 aspect-ratio 对其无效；必须用容器包裹并设置 aspect-ratio、width、height、object-fit 和 overflow 等配套样式。
aspect-ratio 不能直接写在 video 元素上——写了也白写，浏览器会忽略，视频高度塌陷或拉伸。这不是你代码有误，是规范行为。
为什么 video { aspect-ratio: 16 / 9 } 无效
video 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效。你在开发者工具里看到该属性状态为 “inactive”，computed height 往往是 auto 或 0px。
常见现象包括：
- 页面刚加载时
video高度为 0，只显示一条细线 - 横竖屏切换后比例错乱，尤其在 Safari 15.4–16.3 的
flex容器中 - 服务端返回不同宽高比（如
9 / 16、21 / 9）时硬写死16 / 9导致裁切或留白
必须用容器包裹并设 aspect-ratio
核心操作就三步，缺一不可：
- 给
video套一层<div class="video-wrapper"></div> -
.video-wrapper上写aspect-ratio: 16 / 9+width: 100%（单独写aspect-ratio会导致容器塌陷） -
video本身设width: 100%+height: 100%+object-fit: cover，并移除 HTML 中的width和height属性（如width="640"）
务必加 overflow: hidden 到 wrapper，防止 object-fit: cover 失效时内容溢出；若 wrapper 在 flex 容器中，还需加 flex-shrink: 0 或 min-width: 0，否则 Flex 默认的 min-width: auto 会锁死缩放空间。
@supports 降级必须分层写，不能平铺
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，但 Edge 91–102、iOS Safari 15.3 及更早版本会完全忽略该声明，导致容器高度为 0。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
错误写法：把新旧样式平级写，旧浏览器回退到无约束状态，CLS 更严重。
正确写法：
- 外层用
@supports not (aspect-ratio: 1 / 1)包裹 padding-top 方案（如padding-top: 56.25%+position: relative） - 新写法用
@supports (aspect-ratio: 1 / 1)包裹，确保仅支持的浏览器执行 - 分数形式必须写
16 / 9，别写16:9（非法）或1.777（精度误差易引发 1px 裁切）
动态比例和不同场景怎么写才不踩坑
业务中视频来源多样，比例可能为 1 / 1、9 / 16、21 / 9，甚至服务端返回动态值。
- 封面图用
aspect-ratio: 21 / 9，头像用aspect-ratio: 1 / 1，卡片图用aspect-ratio: 4 / 3 - 后端返回宽高后，内联写
style="aspect-ratio: ${w} / ${h}"，但必须约分为最简整数比（如3840 / 2160 → 16 / 9，调用gcd()计算） - 若 wrapper 在
grid容器中，加min-height: 0；在flex中加flex-shrink: 0或min-width: 0
最容易被忽略的是：aspect-ratio 只管容器尺寸，不管内部视频怎么显示——object-fit 和 overflow: hidden 必须配套，否则裁切、溢出、黑边全来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
