I have an image list, I want images scaled into their containers which have same size. like this:
I created a 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>
How can I do that? And in my example, I defined height: 100px;, this leads to not responsive, if I resize the browser, the div's height remain unchanged. If possible, I want this image list responsive.