相关疑难解决方法(0)

我有一个图像列表,我想要将图像缩放到具有相同大小的容器中.像这样:

我创造了一个jsfiddle

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" >
            </a>
        </div>
    </div>
</div>

我怎样才能做到这一点？在我的例子中,我定义了高度:100px;,这导致无响应,如果我调整浏览器的大小,div的高度保持不变.如果可能,我希望此图像列表响应.

具有类.img-fluid的Bootstrap 4中的响应图像被不成比例地调整大小.它们保持高度均匀宽度正在缩小.这会使整个图像变形.有没有什么方法可以让它像使用类.img响应的Bootstrap 3一样流畅？谢谢

<div class="col-sm-6">
    <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>

顺便说一句,它在Bootstrap 4文档(https://v4-alpha.getbootstrap.com/content/images/)中是相同的,其中样本svg图像保持高度250像素,而不管它的宽度.