How to scale image to fit the container?

问题

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.

回答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

回答2:

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

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

回答3:

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

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

回答5:

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

Use this.

回答6:

 .thumbnail {
        height: 100%;
    }

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

回答7:

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

来源：https://stackoverflow.com/questions/30595321/how-to-scale-image-to-fit-the-container