直接给 <img> 加 aspect-ratio 无效，因其是替换元素不参与盒模型高度计算；必须用块级容器包裹，并满足三条件：块级显示、明确宽度、未设置 height/max-height 等覆盖样式。
直接给 <img> 加 aspect-ratio 没用，必须包裹一层块级容器并满足三个硬条件；否则图片一加载，周围内容全跳。
为什么 aspect-ratio 写在 <img> 上无效
<img> 是替换元素，不参与 CSS 盒模型的高度计算。写 style="aspect-ratio: 16/9;" 在 <img> 标签上，浏览器直接忽略——既不预留空间，也不推导高度。
真正生效的前提是：外层容器为块级（display: block / flex / grid）、有明确宽度（如 width: 100% 或具体像素值）、且未设置 height / max-height 等覆盖高度的样式。
- 常见失效场景包括：
flex子项没设min-width: 0（默认min-width: auto会压扁容器） - uni-app 的
<image>或 Swiper 的swiper-item未继承父宽 - 用了
display: inline-block却没显式设宽
怎么让 aspect-ratio 真正撑开高度
它不是魔法，依赖宽度推导高度。父容器宽度不确定时，aspect-ratio 就是摆设。
立即学习“前端免费学习笔记（深入）”；
稳定写法示例：
.img-wrapper {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
- 确保
.img-wrapper的父容器有明确宽度（比如max-width: 100%+margin: 0 auto） - 避免在
.img-wrapper上加height、max-height或flex-shrink: 0（会打断比例计算） - 如果用在 Grid/Flex 项目中，记得给该项加
min-width: 0防止收缩压垮高度
兼容旧浏览器的 fallback 方案
IE 和部分安卓 WebView 不支持 aspect-ratio，得用伪元素模拟比例占位。
关键点：
- 容器设
position: relative - 伪元素
::before用padding-top: 75%（对应 4:3）撑高 - 真实
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须配
overflow: hidden防止图片溢出
注意：这种写法对文字卡片等高度不可预测的内容不适用，此时应改用 min-height + minmax()。
比 aspect-ratio 更稳的替代方案
只要 <img> 还在文档流里，就可能触发重排。彻底剥离尺寸影响，用背景图：
- 把
<img>移到 CSS 中作为background-image - 容器设
min-height: 300px（覆盖所有断点下的最小可读高度） - 文字层用
position: absolute叠加，别忘了z-index和响应式padding - 关键图文内容仍需保留语义化
<img>+alt，背景图仅作视觉优化
真机测试时最容易被忽略的是：iOS Safari 对 flex-basis 解析不一致，有的转成 auto，有的保留像素值——务必在真机上看 computed style，别信模拟器。
