aspect-ratio不生效的根本原因是浏览器需至少一个方向尺寸为自动计算，若同时显式设置width和height则被跳过；它支持16/9和1.777两种写法，不兼容冒号或字符串格式，且须配合可测量宽度及避免height:100%等冲突声明。
aspect-ratio 是现代 CSS 中实现固定宽高比最直接的方式，但它不是“写了就生效”的万能开关——它只在特定条件下起作用，用错地方反而会让容器塌陷或被忽略。
为什么 aspect-ratio 有时不生效？
根本原因是：浏览器需要至少一个方向的尺寸是「自动计算」的，aspect-ratio 才会介入调整。如果同时写了 width: 300px 和 height: 200px，那宽高比就完全由你定死，aspect-ratio 被跳过。
- ✅ 正确场景：只设
width: 100%或max-width: 600px，高度留空（height: auto或不写） - ❌ 错误场景：显式写了
height: 400px，哪怕同时写了aspect-ratio: 16 / 9，也无效 - ⚠️ 注意：
min-height或max-height不会阻止aspect-ratio生效，但若它们强制截断了计算出的高度，视觉上会看到裁剪
aspect-ratio 的取值写法差异
它接受两种形式，语义不同，不能混用：
-
aspect-ratio: 16 / 9→ 明确表示宽 ÷ 高 = 16 ÷ 9，推荐用于视频、海报等有标准比例的场景 -
aspect-ratio: 1.777→ 等价于1.777 / 1，即宽 ÷ 高 = 1.777，适合动态计算后注入的数值（比如 JS 计算出的比例） - 不要写
aspect-ratio: 16:9或aspect-ratio: "16/9"，语法错误，会被整个忽略
和 padding-top 方案对比时的关键权衡
虽然 aspect-ratio 更简洁，但老项目或需支持 Safari 15.4 以下、Firefox 89 以下时，仍得 fallback 到 padding 技巧。两者不能简单叠加，必须做兼容处理：
- 现代写法可直接用
aspect-ratio，无需position: relative或子元素绝对定位 - 要兼容旧浏览器，就得用双写法：
aspect-ratio在前（新浏览器优先），再加一层padding-top+position布局（被忽略的旧浏览器兜底） - 注意：如果父容器本身宽度不明确（比如
display: inline-block且无width），padding-top百分比会失效，而aspect-ratio也可能表现异常——此时必须确保父级有可计算的宽度
aspect-ratio 只控制盒模型尺寸，不控制子元素缩放行为；若需内容也等比缩放，还得额外配合 transform: scale() 或视口单位，这不是 aspect-ratio 的职责。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
