如何在Less中实现响应式图片自适应比例_封装PaddingBottom技巧-css教程-PHP中文网

Less中用percentage(@ratio-h / @ratio-w)计算padding-bottom，如percentage(9/16)得56.25%，配合round()控精度；封装.aspect-ratio mixin统一处理relative定位、height:0、padding-bottom和overflow:hidden，确保等比缩放与裁剪可靠。

如何在less中实现响应式图片自适应比例_封装paddingbottom技巧

Less里怎么算padding-bottom百分比值

直接手算容易出错，比如16:9写成56.25%没问题，但4:5（0.8）写成80%、21:9（2.333…）写成42.857%就容易漏小数位。Less的percentage()函数能自动转小数为百分比字符串，配合round()控制精度更稳妥。

常见错误是把比例倒过来用：写percentage(16/9)得到177.777%，实际该用percentage(9/16)——因为padding-bottom代表的是“高度占宽度的百分比”，分子是高，分母是宽。

percentage(9 / 16) → 56.25%
percentage(3 / 4) → 75%
round(percentage(100 / 375), 2) → 26.67%（适配375×100px图）

封装一个可复用的aspect-ratio mixin

不要每个容器都重复写position: relative + padding-bottom + 子元素绝对定位。用Less mixin把逻辑收拢，参数只暴露宽高比，其他样式保持不变。

注意：mixin里必须显式设height: 0和overflow: hidden，否则padding撑开的空间可能被内容溢出破坏；overflow: hidden不是可选的，是保证裁剪效果的关键。

.aspect-ratio(@ratio-w: 16, @ratio-h: 9) {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: percentage(@ratio-h / @ratio-w);
  overflow: hidden;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

调用时：.aspect-ratio(4, 3) 或 .aspect-ratio(1, 1)，比硬编码数字更易维护。

@supports检测aspect-ratio失败的坑

很多人想用@supports not (aspect-ratio: 1 / 1)做降级，但这是语法错误——CSS @supports不支持无值检测，必须带具体值，且不能省略单位或斜杠格式。

正确写法是@supports not (aspect-ratio: 16 / 9)，但更稳妥的是检测任意合法值：@supports not (aspect-ratio: 1)（Chrome 88+ 支持该写法，Safari 15.4+ 才支持16 / 9语法）。生产环境若需兼容 iOS 14.x 或旧版安卓 WebView，建议直接 fallback，别依赖@supports检测。

Less里没法在@supports块里调用mixin，所以得把降级样式单独写死，或用JS运行时判断后加class控制。