CSS3 - 如何强制图像高度/最大高度匹配（计算的）宽度？答案

【问题标题】：CSS3 - how to force image height / max-height to match the (calculated) width?CSS3 - 如何强制图像高度/最大高度匹配（计算的）宽度？
【发布时间】：2020-01-10 08:33:00
【问题描述】：

如何将图像高度与计算的 ("width: 25%;") 图像宽度相匹配？

我试过“高度：计算（宽度）；”但这是无效的。与“高度：计算（宽度*1.00）”相同...

换句话说，我不知道用户的屏幕尺寸/浏览器尺寸，所以我指定 "img { width: 25%; } 以连续放置 4 张图像，但如果其中任何一张不是正方形，它弄乱了布局；我怎样才能强制高度不超过宽度，无论宽度最终是什么？

【问题讨论】：

标签： css

【解决方案1】：

它不是纯 CSS 解决方案，但一种选择是动态设置高度 onload：

function resize(e) {
  e.height = e.width
}

.wrapper {
  font-size: 0;
}

.image {
  width: 25%;
}

<div class="wrapper">
  <img src="https://placekitten.com/500/500" class="image" onload="resize(this)" />
  <img src="https://placekitten.com/300/500" class="image" onload="resize(this)" />
  <img src="https://placekitten.com/200/500" class="image" onload="resize(this)" />
  <img src="https://placekitten.com/500/400" class="image" onload="resize(this)" />
</div>

这实现了基于宽度的动态高度，但有一些缺点，因为它可能会短暂“闪烁”，它不是基于 CSS 的，您可能需要重新评估调整大小。

【讨论】：

【解决方案2】：

这样做的一个技巧是利用这样一个事实，即当垂直填充指定为百分比时，它是元素父元素的宽度的百分比。考虑到这一点，您可以设置元素的 height: 0 和 padding-top: 100% 以获取方形元素，然后将图像渲染为背景。

这可能不是最好的标记方式，但出于演示/概念验证的目的，它会这样做：

.container {
  width: 25%;
  display: inline-block;
}

.container > div {
  height: 0;
  padding-top: 100%;
  background: url('http://placekitten.com/200');
  background-size: cover;
}

<div class="container">
  <div></div>
</div><div class="container">
  <div></div>
</div><div class="container">
  <div></div>
</div><div class="container">
  <div></div>
</div>

【讨论】：