25

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

a b

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.

2

7 Answers 7

41

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

3
  • How to make img align center(horizontal and vertical)? And in my example, I defined height: 100px;, this leads to not responsive, if I resize the browser, the div's height remain unchanged.
    – Sato
    Commented Jun 2, 2015 at 11:59
  • 2
    You can use display: table-cell; with vertical-align: middle; jsfiddle.net/7gk6squL Commented Jun 2, 2015 at 12:09
  • This is the one answer (and I've looked at a dozen or so similar questions) that will actually do what I was looking for! No matter the size of the surrounding div, the image will keep its aspect ratio and shrink/grow the image to fit it to 100% of the most relevant side. Commented Jan 7, 2016 at 21:34
7
.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;
}
1

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;
}
0
.thumbnail img {
 height: 100%;
    width: 100%;
}

Use this.

0
 .thumbnail {
        height: 100%;
    }

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.