用padding-bottom而非height控制图片占位，因其基于父容器宽度计算百分比，天然支持响应式宽高比锁定；而固定height会破坏自适应，导致小屏拉伸、大屏留白。
为什么用 padding-bottom 而不是 height 控制图片占位比例
直接设 height 会破坏响应式：固定高度在小屏上拉伸变形，大屏上又留白过多。而 padding-bottom 基于父容器宽度计算，天然支持宽高比锁定——只要父容器宽度自适应，内边距就跟着变，从而撑开高度。
关键点在于：padding-bottom 的百分比值是相对于父元素的 width 计算的，不是自身高度。所以 padding-bottom: 56.25%（16:9）实际效果 ≈ 父宽 × 0.5625，刚好构成目标宽高比。
Less 中封装宽高比函数避免硬编码
每次手算 padding-bottom 癪烦还易错（比如 4:3 是 75%，3:4 是 133.333%）。用 Less 函数自动算：
.aspect-ratio(@w: 16, @h: 9) {
position: relative;
width: 100%;
&::before {
content: "";
display: block;
padding-bottom: percentage(@h / @w);
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
调用时写 .aspect-ratio(4, 3) 就行，不用查表或心算。注意两点：
- 必须用
percentage()而不是手动写@h / @w * 100%，否则 Less 会报类型错误 -
::before占位块需设display: block，否则padding-bottom不生效
图片加载后如何不重排布局
占位区撑开了，但真实图片加载完成时如果没约束尺寸，仍可能撑大容器或溢出。必须加兜底样式：
- 图片本身设
max-width: 100%和height: auto，保证等比缩放 - 外层容器用
overflow: hidden防止图片略高时露边 - 慎用
object-fit：虽然能裁剪适配，但部分老浏览器不支持，且和占位逻辑耦合后容易在加载瞬间闪动
完整结构示例：
<div class="img-wrapper">
@@##@@
</div>
<p>.img-wrapper {
.aspect-ratio(16, 9);
overflow: hidden;
> img {
max-width: 100%;
height: auto;
display: block;
}
}</p>
实际项目里容易漏掉的兼容性细节
这个方案在多数现代场景可行，但有三个现实卡点：
- IE8 及更早版本不支持
::before伪元素内容，需降级为额外 DOM 元素（如<div class="placeholder"></div>） - 当父容器宽度为
0（比如 Tab 切换后初始隐藏），padding-bottom计算结果也是0，导致占位失效——得配合 visibility + reflow 或监听尺寸变化 - 服务端渲染（SSR）时若 Less 未编译，CSS 丢失，首屏会塌陷；确保构建流程中 Less 提前编译成 CSS 并注入
最常被忽略的是父容器宽度来源：它必须由 CSS 显式定义（如 width: 100%、max-width: 600px），不能依赖内容撑开。否则 padding-bottom 永远是 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
