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

在不切断的情况下，无法将所有图像制作为相同尺寸。

您可以执行的操作是针对您定位的每种尺寸在商品上添加必要的明确修复。这将使他们保持在正确的网格中。 Bootstrap针对这三个断点。

演示： 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/。我的条件是长宽比必须保持不变，它们必须具有相同的宽度，而且我知道高度是不可预测的。

当然，它并没有将所有东西保持在一条直线水平线上，但它确实消除了你所谈论的巨大的空白空间。

如何使用Bootstrap将4 x 2的网格与不同大小的图像保持在一起

2 个答案: