如何用不同大小的图像创建网格？答案

【问题标题】：How create grid out of images of different sizes?如何用不同大小的图像创建网格？
【发布时间】：2014-03-30 09:27:59
【问题描述】：

我正在尝试创建一个图像网格，其中一行的所有图像共享相同的高度，并且每行使用相同的宽度。

我该怎么做？哪些库可以帮助我？

【问题讨论】：

不能只链接到图片或屏幕截图吗？我无法在您链接的页面上看到您正在寻找的效果。您是指 Google 图片搜索结果的布局方式，以便不同尺寸的图片适合一个网格？
look
好的，我在你的问题中包含了这个。

标签： javascript html css grid photo-gallery

【解决方案1】：

这种类型的网格很难自己制作，所以最好不要重新发明轮子，而是使用互联网上很棒的人创建的很棒的库。

查看最适合您所寻找内容的链接 -->

此链接http://www.jqueryscript.net/tags.php?/grid%20layout/ 也有各种可能有用的图像网格视图库..

事实上，CSS 技巧链接是一种免费的简单实现。这个想法是将图像宽度设置为 100% 并将您的空间划分为列。

这是从上一个链接中提取的一个sn-p：

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages

.snippet-result-code {
  height: 500px
}

#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;
  }
}

body {
  margin: 0;
  padding: 0;
}

&lt;section id="photos"&gt;&lt;/section&gt;

【讨论】：

自己动手其实并不难（我不是这么建议的）。创建说五列。用调整大小以适合列宽的图像均匀地填充它们。你甚至不需要 JavaScript。
@danijar 你能说更多吗？
@serge 您想要的网格布局有点复杂，因为它由行而不是列组成。列通常不需要水平对齐，就像在 Pinterest 上一样。但是您需要适合整个宽度的行，这只能通过裁剪图像来实现。

【解决方案2】：

CSS Grid 框架运行良好。您可以在网站CSS Tricks 上找到更详细的说明。这是一个适用于上述图像的示例。（这是我的JSFiddle 结果）。

/*grid container*/

 .container {

          display: grid;
          padding:60pt;
          grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;  
          /*adjust outer values if you want less padding on the sides, 
           in jsfiddle I used 5% */
          grid-template-rows: 10% 300pt 250pt 10%;
          grid-column-gap: 10px;
          grid-row-gap: 5px;

        }

    .container div img { width: 100%;
                         height: 100%;
                         }

/*image div classes*/

    .main_1 {
      grid-area: main_1;
      grid-column:2/5;
      grid-row: 2/3; 
    }

    .main_2 {

      grid-area: main_2;
      grid-column:5/8;
      grid-row: 2/3;
    }

    .main_3 {
      grid-area: main_3;
      grid-column:8/11;                                          
      grid-row: 2/3;
    }

    .main_4 {
      grid-area: main_1;
      grid-column:2/4;
      grid-row: 3/4;
    }

    .main_5 {
      grid-area: main_2;
      grid-column:4/7;
      grid-row: 3/4;
    }

    .main_6 {
      grid-area: main_3;
      grid-column:7/11;                                           
      grid-row: 3/4; 
    }

【讨论】：

因此，如果您有一堆图像（比如一千张），这将变得不可能