css-bootstrap-如何连续生成响应式图像

Question

这是我需要的图像：

如您所见，第二张图像的宽度远远大于其他图像。它来自一个响应式网站。

这是我的代码以及我到目前为止使用bootstrap

所获得的代码

<div class="row">
<div class="col-md-3">
    <img src="4.jpg" class="img-responsive" />
</div>
<div class="col-md-5">
    <img src="4.jpg" class="img-responsive" />
</div>
<div class="col-md-4">
    <img src="4.jpg" class="img-responsive" />
</div>
</div>

结果：

如您所见，每个图像的高度都不同。宽度很好但高度不符合直线。

如何获得第一张图片？

Answer 1

将img中的每个span换行：

<div class="col-md-3">
    <span class="img-responsive-wrap">
        <img src="4.jpg" class="img-responsive" />
    </span>
</div>

然后添加类似这样的CSS：

.img-responsive-wrap {
    display: block;
    height: 200px;
    overflow: hidden;
}

Answer 2

从第一个例子来看，它是一个3-6-3网格，而在移动设备上可能是12-6-6。为了实现这一点，我建议改变（裁剪）图像，使它们具有正确的宽高比。这是一分钟的工作，你不需要使用overflow：hidden。我很确定他们在第一个例子中做了什么。

Answer 3

试试这个，看看jsfiddle中的代码： http://jsfiddle.net/zj9v81t7/15/

.row {
    border: 1px solid red;
    float: left;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.col-md-3{width:28.5%; float:left;}
.col-md-4{width:28.5%; float:left;}
.col-md-5{width:43%; float:left;}