如何从不同大小的图像中创建网格？ [英] How create grid out of images of different sizes?

问题描述

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

我怎样才能做到这一点，哪些图书馆可以帮助我？

解决方案

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

结帐这个链接最适合你在找什么 - >

1. http://masonry.desandro.com/


2. http://css-tricks.com/seamless-responsive-photo-grid/

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

---

实际上，CSS技巧链接是一个免费的库轻松实现。这个想法是设置图像宽度为100％，并将你的空间分成列。

这是从上一个链接提取的代码片段：

.snippet-result-code {height：500px} #photos {/ * p>

< section id =photos >< / section>

I'm trying to create a grid of images where all images of a row share the same height and where each row uses the same width.

How can I do this and what libraries can help me?

解决方案

This type of grid are difficult to make by yourself so its better to not reinvent the wheel and use awesome libraries created by awesome people on the internet.

Checkout this links which are best for what you are looking for -- >

1. http://masonry.desandro.com/
2. http://css-tricks.com/seamless-responsive-photo-grid/

Also this link http://www.jqueryscript.net/tags.php?/grid%20layout/ has a variety of those image grid view libraries which may be useful ..

---

The CSS trick link is, in fact, a library free easy implementation. The idea is to set images width to 100% and divide your space into columns.

Here is a snippet extracted from the previous link:

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

<section id="photos"></section>

这篇关于如何从不同大小的图像中创建网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！