aspect-ratio必须写在img的直接父容器上，因为它是针对块级容器的空间预留指令，而img是替换元素且默认inline，直接设置会被浏览器忽略或标记为无效；需配合width: 100%且不设height才能生效。
为什么aspect-ratio必须写在img的直接父容器上
浏览器不把aspect-ratio当“图片尺寸控制”，而是当“容器空间预留指令”。它只对参与文档流的块级容器生效，而img本身是替换元素，默认 inline 行为，且加载前无固有尺寸——直接给img加aspect-ratio会被忽略或降级为无效声明。
常见错误写法：img { aspect-ratio: 16 / 9; } → Safari 15.4+ 和 Chrome 88+ 都不认，DevTools 里会标为 invalid。
正确做法是包裹一层语义中性容器（如<div class="img-wrap"></div>），并确保它：
- display 是
block或grid或flex（不能是inline） - 没被
position: absolute/float脱离文档流 - 没设
height（否则会覆盖aspect-ratio推导）
aspect-ratio和width: 100%配合时，为什么不能写height
一旦显式写了height，比如height: 200px，浏览器就不再按宽高比推导高度，aspect-ratio退化为装饰属性。此时若图片加载慢或失败，容器仍可能塌陷（尤其在 SSR 渲染或 JS 懒加载场景）。
真正起作用的是这套组合：
.img-wrap {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #f5f5f5;
}
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
注意：img必须加display: block，否则基线间隙会让容器多出 ~4px 高度，破坏比例精度。
原始宽高比未知时，aspect-ratio怎么设才不翻车
服务端没传宽高、图片URL 动态拼接、或 CMS 返回的是缩略图地址 —— 这些情况没法精确写aspect-ratio: 400 / 300。硬写保守值（如16 / 9）虽能防抖动，但可能导致图片严重裁切或留白过多。
更务实的做法：
- 首屏关键图：用服务端模板提前注入宽高，生成内联
style="aspect-ratio: ${w} / ${h}" - 非首屏/懒加载图：先用占位值
aspect-ratio: 1 / 1，等图片load事件触发后，用 JS 读取naturalWidth/naturalHeight，再 patch 容器样式 - 完全不可控场景：改用
padding-bottomhack（兼容 IE11），但要接受它无法响应aspect-ratio的 CSS 动画过渡
加载完成瞬间的“跳一下”是怎么回事
即使用了aspect-ratio，部分用户仍会看到图片加载完成那一帧的轻微上移或下拉——这不是布局抖动，而是object-fit: cover在尺寸确定后重绘内容位置导致的视觉错觉。
根因是：容器高度由aspect-ratio稳住了，但img内部渲染框（render box）在加载前是空的，加载后才根据object-fit规则重新锚定图像原点。Safari 尤其明显。
缓解方式：
- 给
img加transition: opacity .2s ease-in-out+opacity: 0初始态，加载完 JS 设opacity: 1 - 避免在
img上同时用transform和object-fit，二者叠加易触发合成层重排 - 真要极致平滑，得放弃
<img>，改用background-image+aspect-ratio容器，但会牺牲alt、SEO 和懒加载原生能力
最常被忽略的一点：光靠aspect-ratio只锁住了高度，没解决加载中的视觉断层。底色、淡入、失败 fallback，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
