多个响应图像适合与单个div与CSS

Question

我想创建这种类型的结构与图像。我使用bootstrap，是否可以使用bootstrap创建此类布局，如果不是那么如何？

这里是示例代码：

.side_padding { padding-left: 2.5%; padding-right: 2.5%; } 
 
.img_holder { object-fit: fill; width: 90%; }

 <div class="selection"> 
 
      <div class="container"> 
 
       <div class="row side_padding"> 
 
        <div class="col-sm-5"> 
 
         <div class="img_holder banner"><img src="images/img1.jpg" class="img-responsive" alt=""/></div> 
 
         <div class="img_holder banner"><img src="images/img2.jpg" class="img-responsive" alt=""/></div> 
 
        </div> 
 
        <div class="col-sm-3 center-block"> 
 
         <div class="img_holder banner"><img src="images/img3.jpg" class="img-responsive" alt=""/></div> 
 
         <div class="img_holder banner"><img src="images/img4.jpg" class="img-responsive" alt=""/></div> 
 
        </div> 
 
        <div class="col-sm-4"> 
 
         <div class="img_holder banner"><img src="images/img5.jpg" class="img-responsive" alt=""/></div> 
 
         <div class="img_holder banner"><img src="images/img6.jpg" class="img-responsive" alt=""/></div> 
 
         <div class="img_holder banner"><img src="images/img7.jpg" class="img-responsive" alt=""/></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 1

本质上，例如是一个基本的3列布局的图像。如果你想要一个完美的正方形，那么你需要为每幅图像固定纵横比（或者更准确地说，使用overflow：hidden来“裁剪”它们的容器）。

如果高度不均匀不是问题，那么你应该能够做一些像（jsfiddle - https://jsfiddle.net/1axajum5/） - 所有你需要做的是垂直间距与图像上的边距或行上的填充/边距然而我忽略这让事情变得集中在布局调整的填充是微不足道的，一旦布局已经实现：

<div class="selection"> 
     <div class="container"> 
      <div class="row side_padding"> 
       <div class="col-sm-5"> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
       </div> 
       <div class="col-sm-3 center-block"> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
        <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div> 
       </div> 
      </div> 
     </div> 
    </div> 

从本质上讲，你可以窝列作为必要的，但列施加负利润率，以弥补填充应用在行上，所以如果嵌套列（几乎）总是将它们包装成一行。

Answer 2

请按照每股演示与您

#photos { 
 
    /* Prevent vertical gaps */ 
 
    line-height: 0; 
 
    
 
    -webkit-column-count: 5; 
 
    -webkit-column-gap: 15px; 
 
    -moz-column-count: 5; 
 
    -moz-column-gap:  0px; 
 
    column-count:   5; 
 
    column-gap:   0px; 
 
} 
 

 
#photos img { 
 
    /* Just in case there are inline attributes */ 
 
    width: 100% !important; 
 
    height: auto !important; 
 
    margin:10px; 
 
} 
 
@media (max-width: 1200px) { 
 
    #photos { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count:   4; 
 
    } 
 
} 
 
@media (max-width: 1000px) { 
 
    #photos { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count:   3; 
 
    } 
 
} 
 
@media (max-width: 800px) { 
 
    #photos { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count:   3; 
 
    } 
 
} 
 
@media (max-width: 400px) { 
 
    #photos { 
 
    -moz-column-count: 1; 
 
    -webkit-column-count: 1; 
 
    column-count:   1; 
 
    } 
 
}

<section id="photos"><img alt="pretty kitty" src="https://placekitten.com/358/270"><img alt="pretty kitty" src="https://placekitten.com/378/282"><img alt="pretty kitty" src="https://placekitten.com/242/249"><img alt="pretty kitty" src="https://placekitten.com/294/292"><img alt="pretty kitty" src="https://placekitten.com/258/246"><img alt="pretty kitty" src="https://placekitten.com/360/244"><img alt="pretty kitty" src="https://placekitten.com/300/225"><img alt="pretty kitty" src="https://placekitten.com/254/274"><img alt="pretty kitty" src="https://placekitten.com/384/269"><img alt="pretty kitty" src="https://placekitten.com/278/249"><img alt="pretty kitty" src="https://placekitten.com/290/251"><img alt="pretty kitty" src="https://placekitten.com/391/259"><img alt="pretty kitty" src="https://placekitten.com/335/393"><img alt="pretty kitty" src="https://placekitten.com/363/225"><img alt="pretty kitty" src="https://placekitten.com/277/225"><img alt="pretty kitty" src="https://placekitten.com/263/359"><img alt="pretty kitty" src="https://placekitten.com/249/259"><img alt="pretty kitty" src="https://placekitten.com/346/315"><img alt="pretty kitty" src="https://placekitten.com/310/306"></section>

Answer 3

您可以尝试Gridster JS这一点。

http://dsmorse.github.io/gridster.js/