Ufdjrw

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.

Change the height and width to max-height and max-width. The image won't be any bigger than it's parent.

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

Updated Fiddle

.thumbnail 
 height: 100px;
 display: table;


.thumbnail img 
 height: 100%;
 width: 100%;
 display: table-cell;
 vertical-align: middle;

In 2017 you can use flex. Additionally you will get the images centered in the thumbnail container: updated fiddle

.thumbnail 
 height: 300px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 border: solid 1px blue;


.thumbnail img 
 max-width: 100%;
 max-height: 100%;
 display: block;
 margin: 0 auto;
 border: solid 1px red;

This should help, at least for your example. There might be some cases in which this will not work. In that case you have to find a js solution.

.thumbnail img 
 height: 100%;
 width: auto;

.thumbnail img 
 height: 100%;
 width: 100%;

Use this.

 .thumbnail 
 height: 100%;
 

 .thumbnail img 
 max-height: 100%;
 max-width: 100%;
 border: 1px solid red;
 

(I'll add an answer although this is a old question. I had the same issue until I added the class thumbnail to the image link and looked a little bit deeper. No added css was necessary.)

Maybe something is changed. In Bootstrap 3.3.7. there is this (non-minified css, line 5019):

.thumbnail > img,
.thumbnail a > img 
 margin-left: auto;
 margin-right: auto;

And this (non-minified css, line 1124):

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img 
 display: block;
 max-width: 100%;
 height: auto;

So everything should work right out of the box if you have added the class thumbnail to the image link. (You need to remove both of those and things will break.) And it works with or without the added css:

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

The added css overrides Bootstraps styles, at least for me since the added style is included after the Bootstraps own styles. (But it is redundant.)

<img src="..." class="img-fluid" alt="Responsive image">