Sato Sato -4 years ago 82
CSS Question

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:

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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download