aspect-ratio 比 height: auto 更可靠，因其主动维持宽高比，即使图片未加载或 src 为空也能占位；而 height: auto 仅在 width 明确设定后才生效，否则无效。
直接用 aspect-ratio 就能实现，但必须配对 width: 100% 和 height: auto，否则它不生效；旧版 Safari（iOS 15.4 之前）不支持，得降级。
为什么 aspect-ratio 比 height: auto 更可靠
height: auto 只在 width 被明确设定后才起作用——比如父容器宽度变化时，如果没设 width: 100%，height: auto 就等于没写。而 aspect-ratio 是主动维持比例：哪怕图片还没加载、甚至 src 为空，容器也会按设定比例占位。
常见错误现象：
- 图片忽高忽低，尤其在瀑布流或 flex 容器中闪动
- 父容器宽度动态变化（如横竖屏切换），但图片高度没同步更新
- 用了
max-width: 100%却没配width，height: auto失效
aspect-ratio 的正确写法和限制
写法很简单：aspect-ratio: 16 / 9 或 aspect-ratio: 4 / 3，不能带单位，也不能写成小数（如 1.777）。
必须注意的兼容性与冲突点：
- Chrome 88+、Firefox 89+、Safari 15.4+（即 iOS 15.4+）才支持；iOS 15.3 及更早版本会忽略该声明
- 不能和
height同时设为具体值（如height: 200px），否则aspect-ratio被浏览器静默丢弃 - 若需完整显示图片内容（不裁剪），搭配
object-fit: contain；若要填满容器且允许裁剪，用object-fit: cover - 别误以为设了
aspect-ratio就不用object-fit——前者管容器比例，后者管图片如何“塞进去”
兼容老浏览器的 fallback：padding-bottom 方案
当项目仍需支持 iOS Safari 15.3 或某些安卓 WebView 时，padding-bottom 是最稳妥的纯 CSS 降级方案。原理是利用 padding 百分比始终基于父容器宽度计算的特性来模拟高度。
例如 4:3 图片，宽高比 = 3 ÷ 4 = 0.75 → padding-bottom: 75%：
.img-wrapper {
width: 100%;
height: 0;
padding-bottom: 75%; /* 4:3 */
overflow: hidden;
position: relative;
}
.img-wrapper img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
关键细节：
- 父容器必须设
height: 0，否则padding-bottom不会撑开空间 - 不能给
img设max-width或height: auto，它们会干扰绝对定位布局 - 如果图片原始尺寸极小（比如 1px × 1px），该方案仍能维持比例，但内容可能糊掉——这不是 bug，是设计使然
别踩这些坑：HTML width/height 属性已失效
HTML 中写的 <img style="max-width:90%" style="max-width:90%"> 在现代浏览器里只影响初始渲染，CSS 渲染阶段完全被忽略。依赖它来“帮”等比缩放，结果往往是错的。
真正起作用的是 CSS 层级的控制逻辑：
- 优先用
aspect-ratio + width: 100% + object-fit（现代方案） - 降级时用
padding-bottom + absolute positioning（兼容方案） - 彻底放弃
height: auto单独使用——它不是独立解法，只是配合项
最易被忽略的一点：aspect-ratio 对容器生效，不是对 img 本身；如果你把 aspect-ratio 直接写在 img 上，它确实有效，但一旦图片加载失败，就只剩一个空比例框——而用外层容器包裹，还能在里面加 loading 占位符或 fallback 文案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
