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