使所有图像在引导程序中以相同的高度显示 [英] Making all images appear with the same height in bootstrap

问题描述

我正在尝试使所有4张图像都具有相同的Height尺寸，我已经尝试使用CSS来处理宽度和高度，但似乎无济于事，肖像图像最终总是比横向图像高的，这是代码:

I am trying to make all a row of 4 images all have the same Height size, I already tried to play around with the width and height using css but nothing seems to work, the portrait images always end up taller than the landscape ones, here's the code:

<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>

会发生这种情况:

这就是我想要的(都具有相同的高度)

推荐答案

您可以取消HTML中的width/height属性，并使用CSS进行此操作.只需显式设置高度，并将宽度设置为auto.例如:

You could take off the width/height attributes in the HTML and do this with CSS. Just set your height explicitly, and your width as auto. For example:

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

您需要注意水平放置足够的空间，因为一旦缩放这些图像，您将不知道它们的确切宽度.

You'll need to be careful that you leave enough space horizontally because you won't know the exact width of any of these images once they've been scaled.

这篇关于使所有图像在引导程序中以相同的高度显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！