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/

多个响应式图像适合单个div与css

3 个答案: