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里怎么算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控制。
图片内容怎么填满又不拉伸
单纯用width: 100%; height: 100%会让<img alt="如何在Less中实现响应式图片自适应比例_封装PaddingBottom技巧" >拉伸变形。要保持原始比例并居中裁剪，得用background-image + background-size: cover，或者对<img alt="如何在Less中实现响应式图片自适应比例_封装PaddingBottom技巧" >加object-fit: cover。
但注意：object-fit在iOS 10–13.3、Android 4.4–6.0不支持，这时候只能退回到背景图方案。而背景图方案要求父容器必须有overflow: hidden，否则裁剪失效。
- 推荐优先用
object-fit: cover+object-position: center - 降级时改用
background-image，同时确保父容器有overflow: hidden - 别忘了给
<img alt="如何在Less中实现响应式图片自适应比例_封装PaddingBottom技巧" >设display: block，避免底部默认留白
真正麻烦的不是写法，而是不同场景下要同时兼顾比例锁定、内容裁剪、浏览器兼容、以及父容器是否被flex/grid影响了宽度计算——一旦父宽为0（比如未设flex-basis的flex子项），padding-bottom就彻底失效。这点很容易被忽略。
