aspect-ratio 不能直接用于 或 元素，必须用块级容器包裹并设置宽度约束和 object-fit，否则会导致高度塌陷、cls 跳动及横竖屏错位；因二者均为替换元素，其宽高比由文件元数据决定，css 的 aspect-ratio 会被浏览器静默忽略。
直接写 aspect-ratio 在 <video></video> 或 <img> 上无效，必须用块级容器包裹并配合宽度约束和 object-fit —— 否则高度塌陷、CLS 跳动、横竖屏错位全是必然结果。
video 元素不能直接设 aspect-ratio
浏览器会静默忽略 video { aspect-ratio: 16 / 9 }，因为 <video></video> 是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 层面不参与比例计算。常见现象是：页面加载时高度为 0、视频压成一条线、或切换横屏后比例崩坏。
- 必须用
<div class="video-wrapper"><video></video></div>包裹，aspect-ratio写在 wrapper 上 - 移除
<video></video>标签上的width和heightHTML 属性（如width="640"），否则覆盖 CSS 控制 - wrapper 必须是块级容器：
display: block或display: grid；避免嵌套在display: flex父容器中（Safari 15.4–16.3 有 bug）
图片同样不能直接设 aspect-ratio
<img> 也是替换元素，默认 display: inline，且加载前无固有尺寸，aspect-ratio 对它完全不生效。DevTools 里该声明常标为 “invalid”，高度照样塌陷。
- 父容器需满足三个条件：是
block/flex/grid；未脱离文档流（不用position: absolute或float）；没设height（连height: auto都可能干扰） - 最小可靠组合：
.img-wrap { width: 100%; aspect-ratio: 4 / 3; }+.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } - 漏掉
width: 100%就算aspect-ratio写对了也没法推导高度
必须配 width 才能生效
aspect-ratio 只定义比例，不提供尺寸基准。单独写 aspect-ratio: 16 / 9，容器可能塌成一条线，或无限拉伸——浏览器根本不知道“宽多少”，就无法算出“高多少”。
- 必须显式设置宽度方向约束：
width: 100%、max-width: 800px或inline-size: 100% - 不要同时写
height: 200px这类固定值，会直接丢弃aspect-ratio，且不报错不警告 - 在 Grid/Flex 布局中，注意
align-items: stretch（Flex 默认）会强行撑高子项，覆盖比例计算；可加align-self: center修复
@supports 降级必须写对
旧版 Safari（如 iOS 15.2）、老安卓 WebView 不支持 aspect-ratio，会静默失效，导致容器高度为 0，内容突然下移（CLS）。不能只测最新 Chrome。
- 用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级方案写在外部 - padding 百分比 fallback 必须精确：
padding-top: 56.25%（16:9）、padding-top: 75%（4:3），写成56%或74.9%就偏形 - 若项目仍需支持 IE 或极老 WebView，纯 CSS 不够用，得回退到 JS 动态计算高度
最易被忽略的是：aspect-ratio 生效的前提不是“属性写对了”，而是“容器能提前预留空间”。一旦漏掉宽度约束、或用了不兼容的 display 模式、或忘了移除 video/img 的 HTML 尺寸属性，所有后续样式都会失效，且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
