padding-top百分比基于父宽计算，可实现响应式长宽比控制；less用percentage(@h/@w)封装mixin提升准确性和复用性，兼容旧浏览器但需伪元素占位。
为什么 padding-top 百分比能实现长宽比控制
CSS 中 padding-top 的百分比值是相对于父容器宽度计算的，不是高度——这是关键。所以当容器 width 固定或由上下文决定时，用 padding-top: 56.25%（即 16:9 = 9/16 ≈ 0.5625）就能让内边距撑出对应比例的高度空间。
这招常用于响应式视频容器、图片占位、背景图容器等需要“宽高比锁定但不固定像素”的场景。Less 本身不改变这个行为，但它能帮你把比例算得更干净、复用更安全。
在 Less 中封装长宽比 mixin 的正确写法
直接硬写 padding-top: 56.25% 很容易出错：比如把 4:3 写成 75%（实际是 3/4 = 0.75 ✅），但有人会误算成 4/3。Less 可以用除法自动算：
推荐 mixin 写法：
.aspect-ratio(@w: 16, @h: 9) {
position: relative;
width: 100%;
&::before {
content: "";
display: block;
padding-top: percentage(@h / @w);
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
用法示例：
.video-container {
.aspect-ratio(16, 9);
}
.hero-banner {
.aspect-ratio(4, 3);
}
注意点：
-
percentage()是 Less 内置函数，它把小数转成带 % 的字符串，比如percentage(0.75)→75% - 别漏掉
::before伪元素——它是真正撑开高度的载体 - 子元素必须用
position: absolute覆盖整个区域，否则内容会被 padding 推下去
常见错误：padding-top 在 flex 或 grid 容器里失效
如果父容器是 display: flex 或 display: grid，且子项没设 flex: 0 0 auto 或显式 width，padding-top 百分比可能按“不确定宽度”计算，结果为 0 或意外值。
解决方法：
- 确保该容器的 width 可被父级明确解析（比如
width: 100%、max-width: 800px） - 避免把它直接放在
flex: 1的 flex item 里，除非外层已限定宽度 - 在 Grid 中，不要让它成为
grid-area且未设置min-width或width
替代方案对比：aspect-ratio CSS 属性 vs padding-top
原生 aspect-ratio（Chrome 88+、Firefox 89+）写起来更直白：aspect-ratio: 16 / 9。但它不兼容 IE 和旧版 Safari，而且对 img 或 video 标签需配合 object-fit 才能填满。
而 padding-top 方案：
- 兼容 IE8+，无 JS 依赖
- 必须用伪元素或空子元素占位，DOM 结构略重
- 无法响应内部内容尺寸变化（比如文字换行导致高度突变）
- Less 里用
percentage(@h / @w)比手算更可靠，尤其涉及 21:9、32:9 等非常规比例时
实际项目中，如果只需支持现代浏览器，优先用原生 aspect-ratio；若要保底，就用 Less 封装好的 padding-top 方案——但务必确认父容器宽度可被准确继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
