我正在寻找本身创建一个产品提要，其中有许多图像都在行和列中对齐，到目前为止，如果我将最大高度强制设置为较小的值，并设置 object-fit: contains 那么它看起来还不错，但是，如果我把屏幕尺寸变小，它就会搞砸，并且各个 div 再次变成不同的尺寸，这会导致一些比其他的高，最终导致缺少行，或者至少缺少对齐的行。
我会连续放置最大数量的项目（大屏幕尺寸，所以 8 个），但我也不确定页面上需要多少行，因为这是动态的，然后我可以设置一行来表示10% 高度。
还有一个问题是，当横向或纵向图片由于站点的当前性质而彼此相邻时，横向图片的尺寸适合查看，但明显短于平均水平。
我想我要问的是有没有一种简单的方法，只使用 bootstrap/twig/php，不需要服务器首先下载图像，这允许我还可以将高度设置为 200px，当 sm 时 400px，当 lg 等时，而不是像素对于该视口大小可能是1“设置行高”...如果我只有一个视口大小，这将在很久以前完成...
HTML/细枝末节
<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