aspect-ratio 必须作用于外层块级容器而非 ，因 是替换元素，其内在尺寸由内容决定，aspect-ratio 无法触发布局约束；正确写法需容器为块级/弹性/网格子项、有明确宽度来源且未声明 height，并配合 object-fit 与 width:100%;height:100% 才生效。
aspect-ratio 必须作用在容器上，不能直接写在 <img> 或 <video></video> 上——否则多数场景下不生效，尤其是 Safari 15.3 及更早版本会完全忽略。
为什么aspect-ratio写在<img>上没用
因为 <img> 是替换元素（replaced element），其内在尺寸由内容决定，aspect-ratio 在它上面无法触发布局约束。实测中常见现象包括：高度塌陷、懒加载后留白错位、在 Flex/Grid 容器中比例丢失、或被显式 height 覆盖而彻底失效。
- 浏览器行为不一致：Chrome 可能“看起来正常”，但本质是回退到 intrinsic 尺寸，不可靠
- 即使图片带
width和height属性，aspect-ratio: auto在<img>上也仅影响 flex/grid 基准，不强制渲染高度 - 真正起效的路径只有一条：外层块级容器 +
width或max-width+aspect-ratio
正确写法与必须配合的条件
容器需同时满足三个条件，aspect-ratio 才会计算并应用高度：
- 设为块级或弹性/网格子项（如
display: block、display: flex） - 有明确宽度来源：
width: 100%、max-width: 600px、flex-basis等 - 不能同时声明
height（哪怕height: auto也会干扰，优先级规则下aspect-ratio被跳过）
语法细节：aspect-ratio: 16 / 9（斜杠前后各一个空格），不可写成 16/9、16:9 或 16/9px；支持小数但推荐分数形式，避免浮点误差。
object-fit 不是可选项，而是必配项
aspect-ratio 只管容器“该多高”，不管里面的内容怎么铺。没配 object-fit，<img> 默认拉伸填充，极易糊掉或裁半。
-
object-fit: cover：填满容器，可能裁边；适合封面图、海报 -
object-fit: contain：完整显示，留白；适合图标、证件照 - 必须加
width: 100%; height: 100%到图片本身，否则object-fit不触发 - 安卓 WebView（尤其 UC、旧版 Samsung Browser）对
object-fit支持不稳定，真机测试不可跳过
兼容 Safari 15.3 及更早的降级方案
如果项目仍需支持 macOS Monterey（Safari 15.3）或某些企业内网环境，aspect-ratio 必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0; - 计算公式：
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别用文件名猜比例（
cover-16x9.jpg不代表就是 16:9），要用真实尺寸或 CMS 输出的元数据
这个 hack 的关键陷阱在于：百分比 padding 值永远基于父容器宽度，不是图片自身尺寸；且一旦父容器宽度为 0 或未定义，整个布局就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
