aspect-ratio 能解决懒加载图片布局抖动，因其在图片加载前通过 css 声明宽高比并配合 width 自动计算高度，稳定容器尺寸；需搭配 width 使用、避免与 height 冲突、注意 flex 布局限制，并为旧浏览器提供 padding-top 百分比 fallback。
为什么 aspect-ratio 能解决懒加载图片的布局抖动
图片没加载完时，浏览器不知道尺寸，会先渲染成 0×0 或默认宽高，等图片下来突然撑开页面——这就是布局抖动。用 aspect-ratio 直接告诉浏览器“这块区域该占多大比例”，哪怕图片是空的，容器高度也能稳住。
关键点在于：它不依赖图片本身，只靠 CSS 声明宽高比，配合 width 就能算出高度。现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）都支持，但 IE 和旧 Safari 完全不认。
- 必须搭配
width使用，比如width: 100%或具体像素值，否则aspect-ratio不生效 - 不能和
height同时设为固定值，否则会覆盖比例计算 - 慎用在 flex 容器里未设
align-items: stretch的子项上，可能被拉伸或截断
怎么给 img 标签加 aspect-ratio 占位符
直接写在 <img> 上最简单，但要注意：图片加载中时，alt 文本或背景色才是用户看到的内容，aspect-ratio 只管留空位。
@@##@@
- 推荐用
4 / 3、16 / 9这类分数写法，比小数（如1.333）更易读且兼容性略好 - 如果后端返回的图比例不统一，得按实际业务分情况写，比如头像用
1 / 1，横幅用16 / 9 - 别忘了加
loading="lazy"，否则aspect-ratio留了空间，浏览器还是急着加载所有图
兼容老浏览器时怎么 fallback
IE 和 Safari 15.3 及更早版本完全忽略 aspect-ratio，这时候得靠 padding-top 百分比方案兜底。原理是利用父容器宽度撑开子元素高度，但写法稍绕。
<div class="aspect-box" style="width: 100%;"> @@##@@ </div>
对应 CSS：
.aspect-box {
position: relative;
width: 100%;
}
.aspect-box::before {
content: "";
display: block;
padding-top: calc(100% / (4 / 3)); /* 4:3 → ~75% */
}
.aspect-box > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
- padding-top 的值 =
100% / (宽 / 高)，比如 16:9 就是calc(100% / (16 / 9))≈ 56.25% - 必须用
::before伪元素占位，不能直接在img上设padding-top，否则会破坏图片渲染 - 这个方案在所有浏览器都有效，但结构多一层，维护成本略高
用 background-image 懒加载时怎么预留空间
有些场景不用 <img src="photo.jpg" alt="一只猫" loading="lazy" style="max-width:90%"> 标签，而是用 div + background-image，这时 aspect-ratio 依然可用，但得注意背景图缩放行为。
<div class="hero-banner" style="width: 100%; aspect-ratio: 16 / 9; background-image: url('banner.jpg');"></div>
- 必须显式设
background-size: cover或contain，否则默认background-size: auto可能拉伸变形 - 如果图是通过 JS 动态插入的（比如用
IntersectionObserver触发加载），记得加载完成后手动触发重绘，避免部分浏览器不更新背景 - 不要在同一个元素上既设
aspect-ratio又设固定height，后者会优先生效，把比例挤掉
真正难的不是写对 aspect-ratio，而是确保所有图片来源都有稳定宽高比；一旦后端返回的图比例乱了，再好的 CSS 也救不了布局抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
