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