在HTML中对齐不同大小的图像

时间:2011-06-28 09:39:29

标签: php html css image-scaling

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

我遇到的问题是应该在任意大小的容器盒中显示标识的分类。每种标识都有不同的大小(即缩减采样的缩略图大小是标识的比例调整版本)。

因此,我们假设我们要将标识限制为一个虚拟方框,例如120x120像素,这意味着生成的缩略图可能包含120x20和30x120的图像,依此类推。它们都具有不同的尺寸,但在每个标识的“长”侧都没有大于120像素。

很好,现在用于分类。你们对我如何打印这些内容有什么好的建议吗?我真的不想在120x120平方的网格空间中打印每个(事实上,我可以看到虚拟框可能是200x100,因此倾向于为水平标识提供更多空间。

但是,我如何创建一个算法(在PHP中)以一种看起来整齐堆叠并最适合的方式显示这些算法?我应该按照垂直尺寸订购它们,你在“列表”中得到的越多,标识就越宽广?

非常感谢任何建议,如果我不清楚某些事情,请随时让我澄清。

1 个答案:

答案 0 :(得分:1)

我首先按高度对它们进行分组和排序,将它们分组成相似高度(±5%差异)的组,然后按宽度排列。每个高度组都有自己的一行。

可以这样看:

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

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


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

根据图像的类型或看起来更好的图像,最宽的图像排在第一位或最后一位。