Css 将不同大小的图像整齐地排列成网格

我正试图将图像排列成一个整齐的网格，如截图所示。这些图像来自CMS，因此它们可以是任何大小

如何使用CSS或JS实现这一点

---

已经存在各种布局

js

库，如

---

您可以检查试试这个，希望这会有所帮助。你只需要在你选择的图片之间添加边距

<div id="image-container">
    <img src="http://fakeimg.pl/300/">
    <img src="http://fakeimg.pl/250x100/">
    ...
</div>

#image-container {
  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; 
}

...
#图像容器{
线高：0；
-webkit列数：5；
-webkit柱间隙：0px；
-moz列数：5；
-moz柱间距：0px；
列数：5；
柱间距：0px；
}

我不相信这些都能达到我想要的效果。我的图像可以是任意大小，但这些示例中的图像总是固定宽度。1/4 1/3 1/2插入图像中的附加检查方法大小可变，直接代码笔链接它们仍然使用相同的宽度组，例如20%50%100%等。考虑更多内容似乎相当复杂，甚至可能是不可能的。我只能满足于使用派克。谢谢你的帮助！很好的回答，一旦容器装满，有没有办法使溢出的滚动垂直而不是水平？（假设您的容器具有设置的宽度/高度，例如300px 300px）