用padding-bottom而非height控制图片占位，因其基于父容器宽度计算百分比，天然支持响应式宽高比锁定；而固定height会破坏自适应，导致小屏拉伸、大屏留白。
为什么用
而不是
控制图片占位比例
直接设
会破坏响应式：固定高度在小屏上拉伸变形，大屏上又留白过多。而
基于父容器宽度计算，天然支持宽高比锁定——只要父容器宽度自适应，内边距就跟着变，从而撑开高度。
关键点在于：
的百分比值是相对于父元素的
计算的，不是自身高度。所以
（16:9）实际效果 ≈ 父宽 × 0.5625，刚好构成目标宽高比。
Less 中封装宽高比函数避免硬编码
每次手算
癪烦还易错（比如 4:3 是
，3:4 是
）。用 Less 函数自动算：
调用时写
就行，不用查表或心算。注意两点：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须用
而不是手动写
，否则 Less 会报类型错误
占位块需设
，否则
不生效
图片加载后如何不重排布局
占位区撑开了，但真实图片加载完成时如果没约束尺寸，仍可能撑大容器或溢出。必须加兜底样式：
图片本身设
和
，保证等比缩放
外层容器用
防止图片略高时露边
慎用
：虽然能裁剪适配，但部分老浏览器不支持，且和占位逻辑耦合后容易在加载瞬间闪动
完整结构示例：
实际项目里容易漏掉的兼容性细节
这个方案在多数现代场景可行，但有三个现实卡点：
IE8 及更早版本不支持
伪元素内容，需降级为额外 DOM 元素（如
）
当父容器宽度为
（比如 Tab 切换后初始隐藏），
计算结果也是
，导致占位失效——得配合 visibility + reflow 或监听尺寸变化
服务端渲染（SSR）时若 Less 未编译，CSS 丢失，首屏会塌陷；确保构建流程中 Less 提前编译成 CSS 并注入
最常被忽略的是父容器宽度来源：它必须由 CSS 显式定义（如
、
），不能依赖内容撑开。否则
永远是 0。
padding-bottomheightheightpadding-bottompadding-bottomwidthpadding-bottom: 56.25%padding-bottom75%133.333%.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%::beforedisplay: blockpadding-bottommax-width: 100%height: autooverflow: hiddenobject-fit
.img-wrapper {
.aspect-ratio(16, 9);
overflow: hidden;
> img {
max-width: 100%;
height: auto;
display: block;
}
}
::before0padding-bottom0width: 100%max-width: 600pxpadding-bottom