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

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

Answer 2

.thumbnail {
    height: 100px;
    display: table;
}

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

Answer 3

 .thumbnail {
        height: 100%;
    }

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

Answer 4

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;
}

Answer 5

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

Use this.

Answer 6

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