Question

我一直试图为自己制作图片组合，但一直遇到一些问题。我希望能够发布不同宽高比的图像，使它们具有相同的宽度，并在一个页面上完美地配合在一起。正如您在下面链接的示例中所看到的，前两行看起来很完美，但是当第二行中图像的纵横比发生变化时，空白空间开始出现，布局变得有些混乱。我不是要像现在那样空白的白色块，而是希望图像能够拼接在一起，这样它们全部都没有白色空间，除了留在底部的空间之外。

非常感谢有关如何解决这一问题的任何建议。如果这也更容易，我愿意使用Bootstrap。提前谢谢！

P.S。我知道代码根本不合适。这只是我创建的一个快速示例。

＆＃13;

<!Doctype html>
<html>
<head>
    <title>Image Gallery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    
        body {
            background-color: #fff;
            margin: 0;
            font-size: 0px;
        }
        
        img {
            width: 33.33%;
            padding: 0;
            float: left;
            margin: 0;
            display: inline-block;
        }
        
    </style>    
</head>

<body>

  <img src="http://img.youtube.com/vi/pBy6VTtwK5w/maxresdefault.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/03/IMG_0103.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/04/Sequence-02.Still002.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/04/opuseg.png">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/05/IMG_0011-768x456.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/03/1-e1458162436808-300x280.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/05/IMG_0009-768x456.jpg">
  
  <img src="http://techunderstood.com/wp-content/uploads/2016/03/IMG_1656.jpg">
  
</body>
</html>

＆＃13;

Answer 1

这是一篇关于这个话题的CSS技巧文章。

https://css-tricks.com/seamless-responsive-photo-grid/

<强> HTML：

<section id="photos">
  <img src="images/cat-1.jpg" alt="Cute cat">
  <img src="images/cat-2.jpg" alt="Serious cat">
  ...
</section>

<强> CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -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;
}

@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:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Answer 2

可以使用Masonry布局实现（Pinterest使用此布局显示Feed）。我之前使用过此库，它按预期工作：http://masonry.desandro.com/

图片库没有空格

2 个答案: