CSS组/按宽高比显示图像

Question

我需要CSS代码的帮助。我在wordpress上运行一个摄影网站，我在显示图片时遇到了一些问题。有2种格式的图片正在显示：横向（1200 x 800像素）和肖像（595 x 853像素）。我想把每排高2个分组，因为它们看起来好多了。我每篇文章大约有40-50张图片。

有没有办法做到这一点？

我附上了一个我想如何成为的演示。

谢谢！

Answer 1

您可以使用jaz插件（如Masonry或Isotope）来执行此操作 - 这些插件旨在将您的项目排列在网格中，以便它们非常适合。

在添加插件以调整图像位置之前，您仍需要获得一些HTML和CSS，因此您需要处理插件文档或示例（或提供代码段）。

Answer 2

这取决于你的帖子的动态程度。如果有办法让你先了解HTML + CSS +内容的结构，那么你可以为高图像创建一个.tall-row类，为长图像创建一个.long-row类。而且它基本上是提前规划布局。您可以使用传统的CSS，CSS FlexBox（较新的）或CSS Grid（最新）轻松完成此操作。

如果图像的顺序是某些动态的（因此您不知道何时将渲染高图像或何时渲染长图像），您可以尝试使用CSS Grid'd grid-auto-flow: dense;属性，该属性会尝试计算最好的整体适合所有的孩子。只有当这不起作用时，我建议使用JS或jQuery插件。

这是CSS Grid的grid-auto-flow: dense; https://jsfiddle.net/40p0q5xx/的一个例子