html - 使所有图像在 Bootstrap 中显示相同的高度

Question

我试图让所有一行 4 张图像都具有相同的高度大小，我已经尝试使用 css 调整宽度和高度但似乎没有任何效果，肖像图像总是比风景图像高那些，这是代码:

<div class="container" >
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a>
                <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p>
                <p>50 €</p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a>
                <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p>
                <p>50 €</p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                <a href="#"><img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /></a>
                <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p>
                <p>50 €</p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a>
                <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p>
                <p>50 €</p>
            </div>
        </div>

是这样的:

这就是我想要的(都是一样的高度)

Answer 1

您可以去掉 HTML 中的宽度/高度属性并使用 CSS 来实现。只需明确设置您的高度，并将宽度设置为 auto。例如:

.img-responsive {
    width: auto;
    height: 100px;
}

您需要注意在水平方向上留出足够的空间，因为一旦缩放这些图像，您将不知道它们的确切宽度。