如何用图像填充div并仍然有回应？

Question

我正在尝试制作一个包含不同图片和不同尺寸的图片库。我已经包含了一个图像链接来解释我想要的。我已经做了4个div，每个包含一个图像。图像有宽度和高度。但我的图片有不同的尺寸。即广告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 {width：100％; height：auto;}

图片将始终被缩放以适合div元素。