如何通过Less的内置数学函数计算CSS容器的长宽比例？-css教程-PHP中文网

less没有内置长宽比函数，需用percentage(@h/@w)手动计算；推荐封装.aspect-ratio(@w,@h)混合宏，参数顺序为宽高比习惯（如16:9），注意单位一致性与编译期错误风险。

如何通过less的内置数学函数计算css容器的长宽比例？

Less 中没有内置的长宽比计算函数

Less 本身不提供类似 aspect-ratio() 这样的专用函数，也没有直接返回宽高比值的内置数学函数。它的数学能力仅限于基础四则运算（+、-、*、/）和几个辅助函数（如 round()、percentage()、unit()），所有比例计算都得靠手动推导和单位处理。

用 `percentage()` 和除法模拟“宽高比”值

常见需求是把 16:9 这类比例转成 CSS 可用的数值（比如 padding-bottom: 56.25% 实现响应式占位）。Less 里不能写 16/9 * 100% 直接出百分比——因为 16/9 默认结果是无单位数字（如 1.7777777），乘 100% 后会变成 177.77777%，而非预期的 56.25%（即 9/16 * 100%）。

正确写法是显式调用 percentage(9 / 16)，它会自动将小数转为带 % 单位的值
percentage() 内部做了单位归一化，但只接受纯数字或带相同单位的值；传入 9px / 16px 也行，但没必要
别写 (9 / 16) * 100% —— Less 会先算出 0.5625，再乘 100% 得到 56.25%，看似可行，但一旦分子分母带单位（如 9em / 16rem）就会报错

封装一个可复用的 `aspect-ratio()` 混合宏

为避免每次重复写 percentage()，建议定义一个混合（mixin）：

.aspect-ratio(@w: 16, @h: 9) {
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-top: percentage(@h / @w);
  }
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

用法：.aspect-ratio(4, 3) 生成 padding-top: 75%；.aspect-ratio(1, 1) 生成 100%。注意两点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

参数顺序是 @w 在前、@h 在后，对应 CSS 中宽高比习惯（如 16:9）
必须用 @h / @w，不是 @w / @h —— 因为 padding-top 是基于父容器宽度计算高度占比
如果传入非数字（如 auto 或变量未定义），Less 编译会直接报错，无法 fallback

警惕单位隐式转换导致的编译失败

Less 对单位敏感。下面这些写法都会出错：

percentage(9px / 16) —— 单位不匹配，9px 无法被纯数字 16 整除
percentage((@h * 1px) / (@w * 1px)) —— 表面单位一致，但 1px 会被当作乘法因子，实际算的是 (9 * 1px) / (16 * 1px) = 9/16，虽结果对，但冗余且易误导
percentage(@h / @w) + '%' —— percentage() 已返回带 % 的值，再拼字符串会得到类似 56.25%%