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

Question

我正在为我的 CSS 使用引导程序。我有一个从数据库中获取 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;
}

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