twitter-bootstrap - 如何缩放图像以适合容器？

Question

我有一个图像列表，我希望将图像缩放到具有相同大小的容器中。像这样:

我创建了一个 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>

我该怎么做？在我的示例中，我定义了 height: 100px;，这导致没有响应，如果我调整浏览器的大小，div 的高度保持不变。如果可能，我希望此图像列表具有响应性。

Answer 1

将 height 和 width 更改为 max-height 和 max-width。该图像不会比它的父图像大。

.thumbnail img {
    max-height: 100%;
    max-width: 100%;
}

Updated Fiddle