如何通过改变高度并保持其纵横比来完全填充多行图像

Question

我有一个设计问题，我想通过CSS解决，但我觉得可以用javascript完成。

我有一个不同大小和比例的图像库。我希望他们：

1. 分配更多行
2. 根据给定的最大高度和查看它们的显示器尺寸调整其大小和行分布
3. 填写单行的所有空格，并在它们之间有固定的边距

这是我想要完成的草图



正如你所看到的，第二行高于第一行，为了用更大的图像填充所有空间，我很好（这是唯一的方法）。

我无法实现这一目标。我能做的最好的事情就是用固定的边距平均分配图像但是宽高比完全搞砸了（我知道这里的问题是min-width and max-height ...为什么我不能给max-height并调整{ {1}}因此？）

HTML

width

CSS

<div class="img-blocco">
    <img src=“1.jpg” /> <img src=“2.jpg” /> … <img src=“n.jpg” /> 
</div>

我显然设法均匀分配我的图像，其正确的宽高比将它们与.img-blocco { height: 100%; width: 90%; padding: 0 5%; overflow: hidden; position: relative; display:flex; flex-wrap: wrap; } .img-blocco img { margin: 0 5px 10px; min-width:200px; max-height:300px; flex-grow:1; } 隔开，但我根本不喜欢这种解决方案。

有什么想法吗？

Answer 1

希望这就是你所期待的 - Pen。

请注意，CSS属性object-fit存在browser support in ie11问题。让我知道这是否有帮助。