less中用padding-top实现固定宽高比需借助其按父宽计算的特性，配合position: relative/absolute布局使子元素填满；应使用变量或mixin（如.aspect-ratio(16, 9)）避免魔法数字，并注意ie兼容性、移动端偏差及语义结构问题。
Less里怎么用padding-top实现固定宽高比
直接用padding-top百分比是唯一能在不依赖aspect-ratio的前提下，让容器“记住”比例的方式。它生效的关键在于：浏览器把padding-top的百分比值，按父容器**宽度**计算，而不是高度——这个反直觉特性正是撑开高度的基础。
在Less中，不能写死56.25%这种魔法数字。必须抽成变量或函数，否则改一个比例要全局搜替换。
- 用
@ratio-16x9: 9 / 16 * 100%;定义变量，然后padding-top: @ratio-16x9; - 更灵活的是写个mixin：
.aspect-ratio(@w, @h) { padding-top: (@h / @w) * 100%; }，调用时.aspect-ratio(16, 9); - 注意除法必须加括号，否则Less会按从左到右解析，
9 / 16 * 100%和(9 / 16) * 100%结果一样，但16 / 9 * 100%写成16/9*100%可能被误读为选择器
为什么必须配合position: relative + absolute布局
只设padding-top后，容器有了高度，但里面<img>还在文档流里，默认不会填满那个“空白高度”。常见错误是以为width: 100%; height: 100%就能撑开——它没用，因为父容器高度来自padding，不是height，而height: 100%需要明确的父级高度值才能生效。
真正起作用的是脱离文档流：
- 父容器必须有
position: relative;，否则absolute子元素会往上找最近的定位上下文，可能错位到body上 -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100%;，此时它的height: 100%才参考父容器的总高度（含padding） - 漏掉
top: 0; left: 0;会导致图片偏移，尤其在Safari里表现不稳定
Less封装时如何支持动态比例切换
项目里不可能只有一种比例。封面图、头像、横幅、竖版海报各不相同。硬写多个class太重复，要用CSS自定义属性+Less变量联动。
推荐结构：
- Less中定义基础占位符类：
.placeholder { position: relative; width: 100%; padding-top: var(--ratio, 56.25%); } - 每个具体比例用
:root或组件级style注入变量：<div class="placeholder" style="--ratio: 100%;"> <li>Less里可再封装快捷class：<code>.placeholder--4x3 { --ratio: 75%; }，但注意这属于运行时CSS变量，Less编译时不可见，不能用when条件判断 - 如果要用Less条件生成不同class，得靠循环：
.generate-aspect(@list) when (isarray(@list)) { ... }，但维护成本高，一般不必要 - IE11及以下不支持CSS变量，
var(--ratio)会直接失效，退回到56.25%——如果你用它做竖图--ratio: 177.777%，IE里就变成16:9，画面严重变形 - 移动端WebView（尤其旧版Android UC）对
padding-top百分比计算有偏差，建议加min-height: 0;防塌陷 - 图片加载完成前，占位符是纯色块；如果用
object-fit: cover，得确保<img>本身有display: block;，否则底部留白几像素，破坏视觉对齐 - 不要在
.placeholder上直接写background-color作loading态——它会被<img>盖住；应加伪元素::before或额外一层<div class="bg"><p>最麻烦的其实是语义：占位符容器本该是<code><figure></figure>，但position: relative和padding-top一加，就和<figcaption></figcaption>的默认流式布局冲突，得手动重排，这点常被忽略。
容易忽略的兼容性与性能坑
这套方案看似简单，但几个点一踩就白忙：
