如何用圖像填充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元素。