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

Question

我正在尝试制作一个包含不同图像和不同尺寸的图库。我已经包含了一个图像链接来解释我想要的东西。我创建了一个包含4个div的行，每个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 {宽度：100％;高度：汽车;}

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