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

Question

我正在尝试制作一个包含不同图像和不同尺寸的图库。我已经包含了一个图像链接来解释我想要什么。我用 4 个 div 排成一行，每个 div 包含一个图像。图像具有宽度和高度。但是我的图像有不同的尺寸。 IE。 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%;
}

随着设备屏幕变小，这将迫使它减少。