Question

我有几张不同的图像，所有的图像都有不同的高度/宽度。我希望它们都具有相同的高度并保持其长宽比，因此我认为CSS宽度应等于auto。如何实现我所有的图像都具有相同的高度但保持响应速度？

我编写了以下包含图像的代码：

binary_transform = np.array(labels).astype(np.uint8)
binary_transform[binary_transform>0] = 255
img = Image.fromarray(binary_transform, 'L')
img.save('image.png')

除了我已经研究了以下主题

很遗憾，主题中的解决方案不适用于我的代码。有人可以帮我吗？

Answer 1

不确定这是否是您要寻找的，但也许可以解决。

div{
  width: 100%;
  text-align: center;
}

img{
  max-width:100%;
  max-height: 300px;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>

Answer 2

我认为最好的选择是将这些图像用作背景图像，然后将背景尺寸设置为“包含”或“覆盖”。这样，您可以根据媒体查询将容器的宽度/高度设置为适当的大小。

如何将所有图像的高度设置为相同，但保持响应速度

2 个答案: