CSS组/显示图像的按比例

Question

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

有没有办法做到这一点？

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

谢谢！

Answer 1

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

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

Answer 2

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

如果图像的顺序是动态的（因此你不知道什么时候会有高大的图像渲染或者长图像会渲染），你可以试试CSS Grid＆＃39; d { {1}}属性，试图计算所有孩子的最佳整体适应度。只有这不起作用我才建议使用JS或jQuery插件。

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