CSS3 - 如何强制图像高度/最大高度匹配(计算的)宽度？

Question

如何将图像高度与计算出的(“宽度:25%；”)图像宽度相匹配？

我试过“高度:计算(宽度)；”但这是无效的。同“height: calc(width*1.00)”...

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

Answer 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 的，您可能希望在调整大小时重新评估。