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

我正在研究以下基于Wordpress的web项目：http://udkdev.skopec.de/category/projekte/html/css：网格图像具有不同的高度 - 为什么图像没有正确包装？

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

来源

2017-08-16 JoSch

问题寻求代码帮助必须包括必要的重现它最短的代码**的问题本身**最好在** Stack Snippet **中。虽然您提供了一个链接，但如果它变得无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。请参阅[**我网站上的某些内容不起作用，我可以只粘贴一个链接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯规，工作可以-I-刚刚糊一个链接到它）。 –

这是可能没有JS插件提到的，请参阅下面的回答 – kylecblyth

这只适用于JavaScript而不适用于CSS。你需要像“砌体”（https://masonry.desandro.com/）。

来源

2017-08-16 09:52:47

你可以简单地修复这与CSS只有你需要设置固定高度的图像和添加属性object-fit:cover现在图像将是相同的高度。或者你需要不同高度的图像，那么你需要使用一些JS插件，像https://isotope.metafizzy.co/layout-modes/masonry.html

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

来源

2017-08-16 09:53:57

他希望图像具有可变高度而不是拉伸以适合固定的一个 – kylecblyth

但是，这将设置所有图像的通用高度，我希望图像能够有不同的高度 – JoSch

@JoSch然后你需要使用这个插件https://isotope.metafizzy.co/layout-modes/masonry.html –

您可以将内容分为三米的div并使用最小宽度，使他们下降到单个列当窗口比〜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%; 
}

来源

2017-08-16 10:00:39 kylecblyth

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

回答

相关问题