html - 当 div 的内容不同时 Bootstrap 最大高度/宽度

Question

我想创建一个产品提要本身，它有很多图像，这些图像都按行和列对齐，到目前为止，如果我将最大高度强制设置为较小的值，并设置 object-fit: contain 那么它看起来不错，但是，如果我将屏幕尺寸变小，它就会变得困惑，并且各个 div 再次变成不同的尺寸，这会导致一些 div 比其他的高，最终导致缺少行，或者至少缺少对齐的行。

我会连续放置最大数量的元素(大屏幕尺寸，所以 8)，但我也不确定页面上需要多少行，因为这是动态的，然后我可以设置一个行说 10% 高度。

还有一个问题是，由于网站的当前性质，当横向或纵向图片并排放置时，横向照片的尺寸适合查看，但明显比平均尺寸短。

我想我想问的是有没有一种只使用 bootstrap/twig/php 的简单方法，它不需要服务器先下载图像，这让我也可以将高度设置为 200px，sm 400px，lg 等，但不是像素，它可能是该视口(viewport)大小的 1 个“设置行高”...如果我只有一个视口(viewport)大小，这在很久以前就已经完成了...

HTML/ Twig

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2 productlistcontainer">
    <a href="../product?cat={{result.category_id}}&id={{result.product_id}}">
        <img src={{result.image_url}}    alt="product_image" class="productimages">
    </a>
</div>

CSS

.productimages {
min-height:100%;
min-width:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
}

谢谢，非常感谢任何意见，

-ALLW

Answer 1

已解决:我的 div 设置很奇怪，但在我排序后我使用了 width:100% height:100% background-cover:contain