如何通过Less CSS中的Padding-bottom公式解决图片加载前的占位比例问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计737个文字，预计阅读时间需要3分钟。
直接设置高度会破坏响应式设计：
关键点在于：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) 就行，不用查表或心算。
本文共计737个文字，预计阅读时间需要3分钟。
直接设置高度会破坏响应式设计：
关键点在于：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) 就行，不用查表或心算。