各种尺寸和img响应的图像-如何设置响应div？

Question

我有一个网站，该网站使用JSON对象数组列出了来自数据库的事件。 每个事件都有一堆图像，其中一些图像的大小不相同。 这样一来，事件就不会在每行3个事件的矩阵中很好地对齐，其中只有主图像可见，但它们的大小不同。 我尝试制作一个最大高度div并将其包装在图像周围，以便放置空白，以便每个事件框保持与其他事件框相同的大小，但是当我缩小浏览器中的某个点时，这会破坏我的整个页面，因为所有图片下方的相对div不会移动，因为图片过大并覆盖了它们。 如何处理不同大小的响应图像但想要保持它们都具有相对高度相同的容器div的情况，该容器div随放大和缩小而缩放（理想情况下无需水平拉伸图像）？

<div style="max-height:265px; min-height: 265px;">
    <img class="eventImage img-responsive" src="{{event.image}}" alt="{{event.name}}"/>
</div

Answer 1

不知道这是否会有所帮助，但可能是您可以研究的内容，可能会有所帮助！ https://www.w3schools.com/howto/howto_js_lightbox.asp发生了不同的样式，因此可能是您正在寻找的样式。 希望这可以帮助