html / css：网格用于不同高度的图像 - 为什么图像没有正确包装？

Question

我正在开发以下基于Wordpress的Web项目：http://udkdev.skopec.de/category/projekte/

如您所见，帖子/帖子缩略图有一个网格。其他人在所有缩略图高度相同的前提下进行了设置。我想改变它，以便缩略图可以有不同的高度并正确包裹，而不会在图像排列的行之间创建整体。我可以通过改变当前版本来做到这一点，还是我必须为网格设置一个全新的方法？

Answer 1

这仅适用于javascript而非CSS。你需要像“砌体”（https://masonry.desandro.com/）这样的东西。

Answer 2

您只需使用CSS修复此问题，只需要为图像设置固定高度，然后添加属性object-fit:cover，现在图像的高度相同。或者您需要不同高度的图像，然后您需要使用一些js插件，如https://isotope.metafizzy.co/layout-modes/masonry.html

.wrapper-projekte .post img {
   height: 260px;
   object-fit: cover;
   width: 100%;
}

Answer 3

您可以将内容划分为三个列div并使用min-width，这样当窗口比~850px更窄时，它们就会下拉到该单个列。

这是我的意思的一个例子：

https://jsfiddle.net/g6a4vprb/2/

CSS如下：

.column  {
  width: 30%;
  min-width: 270px; /* put this in a media query (shown in fiddle link above) */
  float: left;
  margin: 0 1%;
}

.column img {
  width: 100%;
}