How to scale image to fit the container?

Question

I have an image list, I want images scaled into their containers which have same size. like this:

Answer 1

(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.)