CSS calc乘法运算失效，求助基于像素计算元素百分比

问题根源 #

你的CSS calc 表达式存在单位不兼容的问题：

padding-bottom: calc((820px / 580) * 100%);

820px 是带长度单位的数值，除以无单位的 580 后结果为 px 单位，再与 100%（百分比单位）相乘时，CSS无法解析这种混合单位的运算，导致整个规则失效。

解决方法 #

直接使用纯数值比例计算，去掉 px 单位即可。因为你要的是「高度/宽度」的比例值，不需要带单位：

/* 修改后的核心CSS */
.calc-element .aspect-size {
  height: 0!important;
  padding-bottom: calc( (820 / 580) * 100% );
}

这样运算结果是纯百分比，完全符合 padding-bottom 的单位要求，能正确根据父元素宽度计算出对应高度，实现你需要的宽高比效果。

额外优化建议 #

如果觉得calc表达式不够简洁，也可以提前计算出比例的精确百分比值（820 ÷ 580 ≈ 141.379%），直接写死数值：

padding-bottom: 141.379%;

两种方式效果一致，用calc的好处是能保留原始尺寸的比例关系，避免手动计算的误差。

内容的提问来源于stack exchange，提问作者Fauline