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

您需要注意水平留出足够的空间，因为一旦缩放，您将无法知道这些图像的确切宽度。

Answer 2

这是一种快速响应的方式。

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

你必须使用img-wrapper的填充底部来使你的图像显示高度，如果你想让图像显示不是100％的col但是想让它们阻止你可以删除从包装器宽度100％并添加显示块和您想要的自定义宽度，但这应该有效。

使所有图像在引导程序中以相同的高度显示

2 个答案: