对齐/排序 HTML 中不同尺寸的图像

Question

因此，我有这个简洁的缩略图 PHP 类，可以在漂亮的网格中对图像进行排序，但我发现网格并不总是显示图像的最佳方式。

我遇到的问题是各种标识应该显示在任意大小的容器框中。每个标识具有不同的大小（即，下采样的缩略图大小是标识的按比例调整大小的版本）。

因此，假设我们希望将标识限制为 120x120 像素的虚拟方框，这意味着生成的缩略图可能包含 120x20 和 30x120 等的图像。它们的尺寸各不相同，但每个标识的“长”边都不超过 120 像素。

好的，现在进行排序。你们对我如何打印这些有好的建议吗？我真的不想在 120x120 的方形网格空间中打印每个内容（事实上，我可以看到虚拟框可能是 200x100，因此倾向于为水平标识提供更多空间。

但是，我将如何创建一个算法（在 PHP 中）以一种看起来整齐堆叠并最适合的方式显示它们？我是否应该按垂直尺寸对它们进行排序，并且在“列表”中越远，标识就越宽

？非常感谢您的建议，如果我不清楚某些事情，请随时要求我澄清。

Answer 1

我首先按高度对它们进行分组和排序，将它们分成相似高度（+-5% 差异）的组，然后按宽度进行分组和排序。每个身高组都有自己的线。

看起来可能是这样的：

+--------------+ +-----------+ +------+
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | +-----------+ +------+
+--------------+

+------------------+ +-------------+ +-------------+ +-------------+ +------+ +--+ 
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | +--+ 
+------------------+ +-------------+ +-------------+ +-------------+ +------+


+--------------+ +------+
|              | +------+
+--------------+ 

根据图像的类型或看起来更好的图像，最宽的图像排在最前面或最后。