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. 查看所有未拉伸的图片。
2. 将所有图像的高度限制为预定值，使它们全部保持水平。
3. 不应裁剪任何图片。

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

Answer 1

如果您有权使用Bootstrap 4，请查看flexbox。