当 div 的内容不同时，引导最大高度/宽度答案

【问题标题】：Bootstrap max height/width when contents of div is different当 div 的内容不同时，引导最大高度/宽度
【发布时间】：2015-11-06 05:30:11
【问题描述】：

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

我会在一行中放置最大数量的项目（大屏幕尺寸，所以 8 个），但我也不确定页面上需要多少行，因为这是动态的，然后我可以设置行表示 10% 的高度。

还有一个问题是，当横向或纵向图片由于站点的当前性质而彼此相邻时，横向图片的尺寸适合查看，但明显短于平均水平。

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

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

【问题讨论】：

标签： html css twitter-bootstrap twig octobercms

【解决方案1】：

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

【讨论】：