イメージをdivに入れる

Question

私は500x500の4枚の写真があります。私が抱えている問題は、最後の絵が不要なスペースを作るページに広がっていることです。ページからはみ出して、どうやってそれを入れるのですか？

HTML：

<div id="collage"> 
<div class="row"> 

<div class="col-md-3"> 
    <img src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w> 
</div> 

</div> 
</div> 

CSS：

#collage img { 
background-size: cover; 
} 

Answer 1

てみてください。このように、.imgの応答性クラスを追加：

<div id="collage"> 
<div class="row"> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w> 
</div> 

</div> 
</div> 

Answer 2

がにイメージタグのmax-widthを作ります100％あなたの問題を解決するCSSコードのようです。
img {max-width：100％; }

Answer 3

#collage img { 
 
    width: 100%; 
 
}