多個響應圖像適合與單個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/