我如何使用Bootstrap保持4 x 2的网格以及不同大小的图像

Question

我有一个4 x 2的网格，上面有产品图片，并且一些文字覆盖了图片。 问题在于图像将全部具有不同的宽高比。

趋向于发生的是，如果一个图像比其他图像高得多，它将推动其他图像不对齐。 我试图找到一种方法来使所有框保持相同的高度，使文本在每张图像上的位置相同，而仅将图片自身缩小以适合。

这也是响应式的，因此请放大jsfiddle上的预览窗口以查看我遇到的问题。

在此示例中，我使用了正确的图像尺寸。

JSFiddle： https ：//jsfiddle.net/w533z8Lg/3/

编辑：删除图像的max-height:292px并仅具有height:292px的布局是正确的，但是较小的图像会拉伸到该高度，并且调整大小不会保持纵横比。

编辑2：我发现这个JSFiddle是对具有相同问题的其他人的解决方案，我将尝试理解它。 http://jsfiddle.net/ETkkR/7/

HTML：

<div class="row featured_products list-group">
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 1</span></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x270/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 2</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 3</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x235/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 4</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x274/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 5</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x160/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 6</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 7</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x292/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item  8</span></span> </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.featured_product {
    padding-left:10px;
    padding-right:10px;
    margin-bottom:15px;
}
.featured_products div.padding {
    padding:5px 10px;
}
.featured_products div.padding div.border {
    border:1px solid #EAEAEA;
}
.featured_products div.padding div.border div.innerpadding {
    padding:5px;
    text-align:center;
    width:100%;
}
.featured_products div.padding div.border div.innerpadding img {
    max-height:292px;
    display:inline-block;
}
span.featured_product_title {
    position: absolute;
    bottom:6px;
    left: 0;
    width: 100%;
    background-color:RGBa(255, 255, 255, 0.6);
    vertical-align:center;
    line-height:50px;
    height:50px;
    color:#46436f;
    font-weight:bold;
    font-size:1.3em;
}

Answer 1

如果不裁切，就不能使所有图像具有相同的尺寸。

您可以做的是针对您要定位的每种尺寸在商品上添加必要的明确修正。 这将使它们停留在正确的网格中。 引导程序针对这三个断点。

演示： http ： //jsfiddle.net/w533z8Lg/5/

@media (min-width: 768px) {
    .featured_products .item:nth-child(2n+1) {
      clear: both;
    }
}

@media (min-width: 992px) {
    .featured_products .item:nth-child(2n+1) {
      clear: none;
    }
    .featured_products .item:nth-child(3n+1) {
      clear: both;
    }
}

@media (min-width: 1200px) {
    .featured_products .item:nth-child(3n+1) {
      clear: none;
    }
    .featured_products .item:nth-child(4n+1) {
      clear: both;
    }
}

Answer 2

在我从事的项目之前，我曾遇到过这个问题。 我最终要做的是将Masonry库与Bootstrap结合使用。 http://masonry.desandro.com/ 。 我的条件是必须保持宽高比，它们必须具有相同的宽度，而且我知道高度是不可预测的。

当然，它不会使所有事物保持在一条直线上，但是可以肯定地消除了您正在谈论的巨大空白区域。