html - Bootstrap 动态调整行高

Question

我想知道如何调整屏幕上显示的图像的大小，使它们的高度都相同。

代码如下:

<div class="container img-content">
<div class="row">
    <h2 class="text-center text-muted title">Image Gallery With Effects</h2>
</div> 
<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6 limit shrink "><img class="img-responsive" src="http://lorempixel.com/400/200/abstract/1/" /></div>
    <div class="col-md-3 col-sm-4 col-xs-6 limit shrink  "><img class="img-responsive" src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg"/></div>
    <div class="col-md-3 col-sm-4 col-xs-6 limit shrink "><img class="img-responsive" src="http://vignette3.wikia.nocookie.net/mrmen/images/d/d2/Mrtallimage.png/revision/latest?cb=20130222100629" /></div>
    <div class="col-md-3 col-sm-4 col-xs-6 limit shrink "><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/%22You_must_be_this_tall_to_have_your_own_religion.%22_(Imagicity_366).jpg"/></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6 gray"><img class="img-responsive" src="http://lorempixel.com/400/200/abstract/5/" /></div>
    <div class="col-md-3 col-sm-4 col-xs-6 shrink "><img class="img-responsive" src="http://lorempixel.com/400/200/abstract/6/" /></div>
    <div class="col-md-3 col-sm-4 col-xs-6 vertpan"><img class="img-responsive" src="http://lorempixel.com/400/200/abstract/7/" /></div>
</div>

这会产生:

是否有可能满足所有这些:

1. 查看所有未拉伸(stretch)的图像。
2. 将所有图像的高度限制为预定值，使它们都处于水平状态。
3. 不应裁剪图片。

如果有更好的方法做到这一点，请提出建议。谢谢!

Answer 1

如果您可以访问 Bootstrap 4，请查看 flexbox .