如何使用CSS的calc函数实现图片高度按比例自适应缩放？

嘿，我懂你想用CSS calc() 实现图片按比例自适应高度的需求——之前我也在这个问题上卡过一阵，给你几个经过验证的可行方案，你可以根据自己的场景选：

这个方法利用了CSS里padding百分比是基于父元素宽度计算的特性，再用calc()来调整比例或者减去固定值，非常实用。

比如你要实现16:9的比例，同时需要减去20px的固定高度（比如容器有其他元素占了高度），可以这么写：

/* 先做一个容器包裹图片 */
.image-wrapper {
  position: relative;
  width: 100%; /* 可以改成你需要的宽度，比如80% */
  /* 16:9的比例对应56.25%，用calc减去固定值 */
  padding-top: calc(56.25% - 20px);
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，保证图片不变形，按需调整 */
}

如果图片的宽度是已知的（比如占满父容器宽度），可以直接用calc()根据比例算出高度：

img {
  width: 100%; /* 图片宽度设为父容器100% */
  /* 16:9比例，计算方式：宽度 / 16 * 9 */
  height: calc(100% / 16 * 9);
  /* 如果是基于视口宽度，就写成 calc(100vw / 16 * 9) */
  object-fit: contain; /* 或者cover，看你需要的显示效果 */
}

⚠️ 这里要注意：calc()里的运算符前后必须加空格！比如calc(100%/16*9)会失效，必须写成calc(100% / 16 * 9)，这是很多人踩坑的点。

如果需要动态切换比例，用CSS变量结合calc()会更灵活：

:root {
  --img-aspect-ratio: 16/9; /* 可以改成4/3、1/1等 */
  --img-width: 100%;
}

img {
  width: var(--img-width);
  height: calc(var(--img-width) / var(--img-aspect-ratio));
}

另外提一句，现在现代浏览器支持aspect-ratio属性，直接写aspect-ratio: 16/9;就能实现比例自适应，如果你不需要兼容太老的浏览器，这个方法更简单，但如果必须用calc()，上面的方案都能解决问题。

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