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:

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.

This might help you.. http://jsfiddle.net/68b3g7pw/2/ – Shrinivas Pai Jun 02 '15 at 11:56 — Shrinivas Pai, Jun 02 '15 at 11:56
See also: http://stackoverflow.com/a/30252800/59087 – Dave Jarvis Nov 27 '16 at 00:29 — Dave Jarvis, Nov 27 '16 at 00:29

score 41 · Accepted Answer · answered Jun 02 '15 at 11:55

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

answered Jun 02 '15 at 11:55

GreyRoofPigeon

17,833
4
36
59

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 Jun 02 '15 at 11:59
2

You can use `display: table-cell;` with `vertical-align: middle;` http://jsfiddle.net/7gk6squL/ – Philip Dernovoy Jun 02 '15 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. – David Routen Jan 07 '16 at 21:34

Coding Enthusiast · Answer 2 · 2015-06-02T12:15:48.697

7

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

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

edited Jun 02 '15 at 12:15

answered Jun 02 '15 at 11:58

Coding Enthusiast

3,865
1
27
50

score 3 · Answer 3 · answered Oct 03 '17 at 07:08

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

score 1 · Answer 4 · answered Jun 02 '15 at 11:58

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

answered Jun 02 '15 at 11:58

m4lt3

465
2
15

score 0 · Answer 5 · answered Jun 02 '15 at 12:01

0

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

Use this.

answered Jun 02 '15 at 12:01

Danish Khan

143
1
9

score 0 · Answer 6 · answered Jun 03 '15 at 16:38

0

 .thumbnail {
        height: 100%;
    }

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

answered Jun 03 '15 at 16:38

Mr_vasu

98
1
11

score 0 · Answer 7 · answered Jun 13 '17 at 06:39

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

How to scale image to fit the container?

7 Answers7

Linked