複数回答画像が1つのdivにCSSで埋め込まれる

Question

このタイプの構造を画像で作成したいと考えています。私はブートストラップを使用していますが、ブートストラップでこのタイプのレイアウトを作成することは可能ですか？ここで

は、サンプルコードである：

.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列レイアウトです。完全な四角形が必要な場合は、各画像の固定アスペクト比（またはより正確には、オーバーフロー：隠しを使用して「切り抜く」コンテナ）が必要です。

高さが問題ではない場合は、（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

あなたはこのためにGridster JSを試すことができますあなたと共有デモにつきとして

#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

に従ってください。

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