Question

我希望创建一个产品Feed本身，它有许多图像都按行和列对齐，到目前为止，如果我强制最大高度为小，并设置对象适合：包含然后它看起来不错但是，如果我使屏幕尺寸变小，它会变得混乱，并且各个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

Answer 1

解决：我让我的div设置奇怪，但在我排序后我使用宽度：100％高度：100％背景封面：包含

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

1 个答案: