aspect-ratio 必须作用于外层块级容器（非 img 标签），且容器需满足 display 为 block/flow/flex/grid、有明确宽度、未设 height 相关属性三条件才生效；需配合 object-fit 和宽高控制，并为旧版 safari 提供 padding-bottom 降级方案。
直接在 <img> 标签上写 aspect-ratio 没用——浏览器会忽略它。防抖的关键，是让图片容器在图片加载前就撑开正确高度，而 aspect-ratio 必须作用于外层块级容器，并配合明确宽度才能生效。
必须套一层容器，别写在 img 上
<img> 是替换元素，自带固有宽高比，CSS 的 aspect-ratio 对它不参与盒模型计算，写了也静默失效。实测中常见容器高度为 0、图片加载后突然下压、Safari 中完全无反应。
- ✅ 正确结构：
<div class="img-wrap"><img src="a.jpg"></div>，样式加在.img-wrap上 - ❌ 错误写法：
<img aspect-ratio="4/3" src="a.jpg">或img { aspect-ratio: 4 / 3; } - ⚠️ 即使用了
object-fit，若没套容器，aspect-ratio仍无法推导高度，占位失败
容器必须满足三个硬条件
aspect-ratio 不是“设了就稳”，它只在以下三者同时成立时才真正推导出高度：
- 容器
display是block、flex或grid（不能是inline） - 有明确宽度来源：比如
width: 100%、max-width: 480px或flex-basis: 300px - 未声明任何
height相关属性（包括height: auto、height: 100%、min-height）
例如：.img-wrap { width: 100%; aspect-ratio: 16 / 9; } ✅；.img-wrap { aspect-ratio: 16 / 9; } ❌（缺宽度，容器可能塌成一条线）
必须搭配 object-fit 和尺寸控制
aspect-ratio 只管“框多高”，不管“图怎么铺”。没有 object-fit，图片默认拉伸填充，容易糊或裁半。
-
img必须设width: 100%; height: 100%，否则object-fit不触发 -
object-fit: cover：等比缩放+居中裁剪，适合封面图 -
object-fit: contain：完整显示，四周留白，建议加background-color防空白突兀 - 别对
img设height: auto——它会干扰容器的aspect-ratio高度计算
兼容旧浏览器要主动降级
iOS Safari 15.3 及更早版本会静默忽略 aspect-ratio，不报错也不渲染。仅靠 @supports (aspect-ratio: 1 / 1) 做检测不可靠，因为老版本连该规则都不识别，直接跳过整个样式块。
- ✅ 推荐降级方案：用
padding-bottom百分比 + 绝对定位 - 父容器设
position: relative; width: 100%; height: 0; padding-bottom: 75%（4:3 对应 75%） -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必手写
@supports not (aspect-ratio: 1 / 1)包裹降级样式，并在真机验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
