Html 使所有图像在引导程序中以相同的高度出现

Making all images appear with the same height in bootstrap

提问by Helder Ferreira

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:

我试图让所有 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>

This is what happens:

这是发生的事情：

This is what i want(all with the same height)

这就是我想要的（都具有相同的高度）

回答by Josh Rutherford

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:

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

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

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

回答by Steve K

Here is a responsive way to go about it.

这是一个响应式的方法。

.img-wrapper {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  width: 100%;
}
.img-wrapper img {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


<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="#" class="img-wrapper">
                     <img class="left-block" src="images/genimage.png"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="#" class="img-wrapper">
                     <img class="left-block" src="images/genimage.png"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="#" class="img-wrapper">
                     <img class="left-block" src="images/genimage.png"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="#" class="img-wrapper">
                     <img class="left-block" src="images/genimage.png"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>

You will have to play with the padding-bottom of the img-wrapper a bit to get your images to appear the height and if you want the images to display not 100% of the col but want them block you can remove the width 100% from the wrapper and add display block and a custom width you want but this should work.

您将不得不稍微使用 img-wrapper 的 padding-bottom 来让您的图像显示高度，如果您希望图像显示不是 100% 的 col 但希望它们被阻止，您可以删除宽度 100%从包装器中添加显示块和您想要的自定义宽度，但这应该可以工作。