如何对齐不同大小的许多图像

Question

我正在为我的CSS使用bootstrap。我有一个数组，从数据库中获取50个图像。图像大小不同。我希望以创建图像行的方式对齐这些图像。行可以是任何高度（一些合理的）。每行可能有不同数量的图像。基本上我受到很多照片库和股票网站的启发，比如fotolia和shutterstock。当我搜索它们时，它们给我100个图像，每个图像也具有不同的尺寸，但它们以宽度保持相同的方式对齐它们。我知道这些公司非常大。但是我想要了解它是否可以用css来实现，或者它也需要用php（用于计算应该如何堆叠图像。

图像可以具有不同的尺寸，但它们以这样的方式对齐，即它们占据div的总宽度。

我尝试了多次设置最大宽度和宽度值，但它们没有给我想要的结果。 有人请帮助我。在此先感谢。

Answer 1

Flexbox非常棒，我尝试过一堆Javascript库，但是没有人想和Gulp和Bower很好地玩，所以我试图找到另一条路线，而Flexbox是一个非常简单（和更好的IMO）替代方案。感谢您尝试使用CSS而不是使用JS复杂化。

这是我在互联网上找到的最好的教程，当我在你的鞋子时它帮助了我。

这应该让你朝着正确的方向前进。您可能还想考虑为内部图像设置最大高度。

快乐编码，如果您有任何疑问，请与我联系！

https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.eule88uh2

进一步 - 在flex上帮助理解父容器和内部元素：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这样的事情可能会让你开始

<div class="flex-container">
    <img class="inner-image portrait" />
    <img class="inner-image landscape" />
    <img class="inner-image portrait" />
    <img class="inner-image landscape" />
    <img class="inner-image portrait" />
    <img class="inner-image landscape" />
    <img class="inner-image portrait" />
    <img class="inner-image landscape" />
</div>

CSS

.flex-container {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start; /* should align items to the top of your flex row if they don't reach 100px in height */
}
.inner-image {
    max-height: 100px;
}
.inner-image.portrait {
    height: 200px;
    width: 100px;
}
.inner-image.landscape {
    height: 100px;
    width: 200px;
}

这是未经测试的，但在概念上应该是正确的，并且可以通过我包含的链接来理解和扩展。