如何以相同的高度连续显示不同大小的图像？

Question

如果我有一个<div>包含多个<div><img src="example-link.jpg"/></div>在其中，我如何让它们像画廊一样显示在这里： https:// knds.art/noont

本质上，我希望将图像调整到与其相邻图像相同的高度并填满身体的整个宽度。

要记住的事情：

• 我希望图像完全显示（即没有object-fit: cover ）
• 我希望图像在调整视口大小时保持其纵横比

我会列出我的尝试，但我已经把头撞在墙上好几个小时了，此时我什至不记得我尝试了什么，为此我道歉。 我只尝试使用 CSS 来获得所需的结果（即大量display: flex尝试并将div包装在额外的div中），但我想知道这是否必须使用 JavaScript 来完成，在这种情况下，如果该解决方案可以在 React 中使用，我将不胜感激。

谢谢！

编辑：图像来自随机数组，我会为具有不同图像的不同页面使用相同的代码

Answer 1

您可以使用引导类。 像 col-lg-6 col-sm-4 这样的东西。 因此，您可以在 W3schools.com 或 bootstrap 官方网站中获得更多相关文档