同一行中每个图像的高度相同的照片库答案

【问题标题】：Photo gallery with with equal height for each image in the same line同一行中每个图像的高度相同的照片库
【发布时间】：2018-12-25 18:07:27
【问题描述】：

我想制作一个照片库，其中的图像具有所有（或几乎）不同的尺寸。

因此，我们的想法是创建一个网格，其图像宽度可能会有所不同，但对于每条线上的图像高度，其高度是相同的。

这是我想要得到的示意图：

这是我的基本 HTML 代码：

<div class="container">
<div class="item">
    <img src="http://via.placeholder.com/300x325">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x311">
</div>
<div class="item">
    <img src="http://via.placeholder.com/400x313">
</div>
<div class="item">
    <img src="http://via.placeholder.com/420x301">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x675">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x401">
</div>
<div class="item">
    <img src="http://via.placeholder.com/300x921">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x300">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x303">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x562">
</div>
<div class="item">
    <img src="http://via.placeholder.com/1330x586">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x325">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x311">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x313">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x301">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x675">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x401">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x921">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x300">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x303">
</div>
<div class="item">
    <img src="http://via.placeholder.com/450x562">
</div>
<div class="item">
    <img src="http://via.placeholder.com/1330x586">
</div>
<div class="item">
    <img src="http://via.placeholder.com/169x234">
</div>
<div class="item">
    <img src="http://via.placeholder.com/169x234">
</div>

我尝试了插件 jquery masonry，但结果没有定论。

我还尝试了一个通过 css Flexbox 的解决方案，使用这个 CSS：

.container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item {
        padding: 10px;
        min-width: 150px;
        max-height: 420px;
        max-width: 75%;
        position: relative;
        text-align: center;
    }
    .item img {
        object-fit: cover;
        height: 100%;
        max-width: 100%;
    }

同一行的图像的高度是相同的，但我在一些我不想拥有的地方出现了很大的边距：这里的例子：https://jsfiddle.net/sadlig/dc6785yx/

也许有更简单的方法可以做到这一点？或者可能存在一个 JS 库来做到这一点？

【问题讨论】：

您是否只想要一组预先确定的尺寸，可以将图像放入其中并裁剪/适合这些预设尺寸？或者您是否想要一些东西来“决定”每行应该是什么高度，哪些图像应该在哪些行中进行动态排列？
Photowall with double sized highlight pictures的可能重复
您找到解决方案了吗？我正在尝试做同样的事情，但我不知道从哪里开始。
@JonathanAurry 抱歉，请看您的评论。我没有找到一个简单的解决方案来做到这一点。纯 CSS 解决方案不合适，砌体插件根本不符合预期。所以我不得不编写一个 javascript 函数来完成这项工作。

标签： jquery css flexbox grid jquery-masonry

【解决方案1】：

您应该能够将 flex: 1 添加到子项目，这应该使所有项目的高度相同。

另外两个可能的解决方案是使用 Match Height JS 插件，您可以编写类似的东西。 http://brm.io/jquery-match-height/

$('.item').matchHeight({
  byRow: true,
  property: 'height'
});

如果您正在寻找最新最好的，那么您也可以查看 CSS Grid，但可能并非所有浏览器都支持。

【讨论】：