Как масштабировать изображение в соответствии с контейнером?

У меня есть список изображений, я хочу, чтобы изображения масштабировались в их контейнеры, которые имеют одинаковый размер. например:

Я создал 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>

Как я могу это сделать? И в моем примере я определил высоту: 100px;, это приводит к нечувствительности, если я изменяю размер браузера, высота div останется неизменной. Если возможно, я хочу, чтобы этот список изображений реагировал.

Ответы

Ответ 1

Измените height и width на max-height и max-width. Изображение не будет больше, чем родительский.

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

Обновлено Fiddle

Ответ 2

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

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

Ответ 3

В 2017 году вы можете использовать flex. Кроме того, вы получите изображения, центрированные в контейнере эскизов: обновленная скрипка

.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

Это должно помочь, по крайней мере, для вашего примера. Могут быть некоторые случаи, когда это не сработает. В этом случае вам нужно найти js-решение.

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

Ответ 5

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

Используйте это.

Ответ 6

 .thumbnail {
        height: 100%;
    }

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

Ответ 7

(Я добавлю ответ, хотя это старый вопрос. У меня была такая же проблема, пока я не добавил класс thumbnail к ссылке с изображением и выглядел немного глубже. Никаких добавленных CSS не было.)

Возможно, что-то изменилось. В Bootstrap 3.3.7. есть это (неминифицированный css, строка 5019):

.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}

И это (неориентированный css, строка 1124):

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

Итак, все должно работать прямо из коробки, если вы добавили класс thumbnail в ссылку изображения. (Вам нужно удалить оба из них, и все сломается.) И он работает с добавленным css или без него:

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

Добавленный css переопределяет стили Bootstraps, по крайней мере для меня, поскольку добавленный стиль включен после собственных стилей Bootstraps. (Но он лишний.)