aspect-ratio 在 video、img 等替换元素上直接设置无效，因其宽高比由文件元数据决定；需包裹容器设 aspect-ratio 并加 min-width: 0，子元素 width/height:100% + object-fit，同时移除内联宽高属性并设 overflow:hidden。
aspect-ratio 在 Flex 子元素上直接设置会失效，不是写法错，而是浏览器规范行为：替换元素（如 video、img）不响应 aspect-ratio，且 Flex 容器默认的 min-width: auto 会锁死缩放空间。
为什么直接给 video 或 img 设 aspect-ratio 没用？
浏览器会忽略该声明，computed styles 中显示为 “inactive”，height 常为 0px 或 auto。这不是兼容性问题，是 CSS 规范对替换元素的限制——它们的宽高比由文件元数据决定，aspect-ratio 不参与计算。
-
video { aspect-ratio: 16 / 9 }→ 高度塌陷，只显示控制条或一条细线 -
img { aspect-ratio: 4 / 3 }→ 图片仍按内容撑开，比例失真 - 在 Safari 15.4–16.3 的 Flex 容器中，该属性完全不触发高度推导
Flex 子项必须加 min-width: 0 才能缩放
Flex 默认给子项设 min-width: auto，防止替换元素被压扁。但这也导致它拒绝随容器变窄，转而拉伸变形。不加这句，width: 100% 和 aspect-ratio 容器都白搭。
- 对
video或img直接加min-width: 0（Tailwind 对应min-w-0） - 若包裹层是 Flex 子项（比如
<div class="flex"><div class="video-wrapper">...</div></div>），则.video-wrapper也要加min-width: 0 - 别只加
shrink-0：它只设flex-shrink: 0，但flex-basis: 0会让宽度坍缩，必须配min-width: 0+width: 100%
正确结构：容器设 aspect-ratio，子元素填满
三要素缺一不可：外层容器有宽、有比例、有收缩许可；内部替换元素显式占满并约束渲染方式。
立即学习“前端免费学习笔记（深入）”；
- HTML 必须包裹：
<div class="video-wrapper"><video>...</video></div>，移除video标签上的width和height属性 - CSS：
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; } .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; }- 若父 Flex 是
row方向，确认没设min-width: 400px这类硬约束卡住子项
@supports 降级必须分层，不能平铺
旧环境（如 iOS Safari 15.3、微信 X5 内核）不支持 aspect-ratio，也常不支持 @supports 语法本身。平铺写法会导致整块规则被跳过，容器高度为 0。
- 先写基础 fallback：
.video-wrapper { position: relative; width: 100%; padding-top: 56.25%; height: 0; } - 再用
@supports not (aspect-ratio: 1 / 1)包裹它（注意不是@supports (not aspect-ratio)） - 内容层必须绝对定位：
.video-wrapper > * { position: absolute; inset: 0; } - 不要在同一样式块里混写
aspect-ratio和padding-top，层叠顺序会让 fallback 失效
实际项目中最容易漏的是 overflow: hidden 和移除内联 width/height ——前者防 object-fit: cover 裁剪失效后溢出，后者避免 HTML 属性覆盖 CSS 控制。这两个点不检查，就算结构全对，首屏加载时仍可能闪动或留黑边。
