Как заполнить div изображением и по-прежнему реагировать?

Question

Я пытаюсь создать галерею изображений с различными изображениями и разными размерами. Я включил ссылку на изображение, чтобы объяснить, что я хочу. Я сделал строку с 4 divs, каждая из которых содержит изображение. Изображения имеют ширину и высоту. Но мои изображения имеют разные размеры. То есть 600x500. Я использую Bootstrap.

Как я могу получить изображения, чтобы заполнить весь div (400 X 400) и по-прежнему реагировать?

Я попытался придать изображению фиксированную высоту и ширину, но тогда изображения больше не реагируют.

<div class="row"> 
<div class="square col-xs-6 col-md-3"> 
    <div> 
    <img src="" class="image-responsive"> 
    </div> 
</div> 
<div class="square col-xs-6 col-md-3"> 
    <div> 
    <img src="" class="image-responsive"> 
    </div> 
</div> 
<div class="square col-xs-6 col-md-3"> 
    <div> 
    <img src="" class="image-responsive"> 
    </div> 
</div> 
<div class="square col-xs-6 col-md-3"> 
    <div> 
    <img src="" class="image-responsive"> 
    </div> 
</div> 

CSS

.square {min-width: 400px; min-height: 400px;} 

This is what im trying to make, some sort of image gallery

Answer 1

Вы можете сделать это:

.square > div > img { 
    min-width: 400px; 
    min-height: 400px; 
    max-width: 100%; 
    max-height: 100%; 
} 

Который заставит его уменьшить, как экран устройства становятся меньше.

Answer 2

Пробег: .square {ширина: 100%; высота: авто;}

Изображение всегда будет масштабироваться, чтобы вписаться в элемент div.