直接给<img>加aspect-ratio无效，因其是替换元素，不参与CSS盒模型尺寸计算；必须作用于外层块级容器，且需满足display为block/flex/grid、显式声明width或max-width、未设置height类属性三条件。
为什么直接给 <img> 加 aspect-ratio 没用
因为 <img> 是替换元素，原生不参与 CSS 盒模型的尺寸计算逻辑。写 style="aspect-ratio: 16/9;" 在 <img> 上，浏览器会忽略它——既不推导高度，也不预留空间。
必须用块级容器包裹，比如 <div class="img-wrapper"><img src="..."></div>，再对 .img-wrapper 设置 aspect-ratio，且该容器需满足三个硬条件：
-
display: block或inline-block（不能是默认inline） -
width: 100%或具体像素值（不能是auto） - 不能有
height、max-height等覆盖高度计算的样式
怎么写才能让 aspect-ratio 真正撑开高度
它不是魔法，依赖宽度推导高度。父容器宽度不确定时，aspect-ratio 就是摆设。
常见失效场景包括：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
flex子项但没设min-width: 0（默认min-width: auto会压扁高度） -
swiper-item或uni-app的<image>组件未继承宽度 - 用了
width: fit-content或display: inline-block却没显式设宽
稳定生效的关键组合：
.img-wrapper {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #f5f5f5;
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
如何兼容 iOS 15.4 之前版本
iOS 15.3 及更早版本完全忽略 aspect-ratio，容器退化为 0 高，加载后突然撑开 → 明显下移抖动。
必须用「双保险」降级：先用 padding-top 占位，再用 @supports 覆盖。
-
padding-top值 = (高 ÷ 宽) × 100%，如 16:9 →padding-top: 56.25% - 父容器必须设
position: relative，图片设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
@supports (aspect-ratio: 1)内要把padding-top设为0，否则新旧规则叠加导致高度翻倍 - 别用
min-height替代padding-top—— 它不参与文档流占位，无法阻止后续内容上浮
在 Tailwind 或 uni-app 里容易踩的坑
Tailwind v3.3+ 的 aspect-video 类只对容器生效，不是 <img> 自身属性；uni-app 的 <image> 组件自身不占位，光靠 CSS 不够。
- Tailwind：确保
content配置覆盖所有模板路径，禁用动态拼接类名（如className={`aspect-[${w}/${h}]`}），JIT 扫描不到 - uni-app：
<image>必须显式设width和height（rpx 或 px），优先用placeholder属性（本地路径，如/static/placeholder.png） - 微信小程序：
swiper-item默认不继承宽度，得手动加width: 100%到外层容器 - 所有平台都别在
<img>标签里写 HTML 的width/height属性（尤其是像素值），会破坏响应式缩放逻辑
flex 或 grid 子项中必须显式写 min-width: 0 和 min-height: 0，否则 aspect-ratio 或 padding-top 都会被压缩归零。 
