Bootstrap image gallery section

Question

У меня есть раздел на моем сайте, который должен растягиваться полностью на экране.

Я хочу добавить 4 изображения в этом разделе, один рядом с другим, и сделать их отзывчивыми. Я хочу, чтобы они заполнили фон и разрывались между ними по мере необходимости. Как мне изменить свой код ниже, чтобы выполнить те эффекты, которые я желаю?

#games { 
    background-color: #000; 
} 

#games img { 
    width: 100%; 
    height: auto; 
} 

.4columns { 
    width: 32%; 
    display: inline-block; 
} 

<section id="games" class="section section-games"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/1.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/2.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/3.png"></a> 
      <a href="" target="_blank"><img class="4columns" src="resources/media/icons/4.png"></a> 
     </div> 
     </div> 
</section> 

Answer 1

Я думаю, что вы хотите что-то вроде этого:

.map{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.map img{ 
 
    float: left; 
 
    width: 25%; 
 
}

<div class="map"> 
 
    <span> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
     <img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" /> 
 
    </span> 
 
</div>