自动调整可变高度的图像

Question

我有一个图像列表（缩略图），显示为图库。这些图像具有固定的宽度和可变的高度。

但由于图像高度可变，页面看起来很有线。

http://www.geoffreywarnerstudio.com/live-edge-2

是否有任何可能的解决方案使用jQuery或PHP使这看起来不错，即自动连续调整图像4？

---

更新

我创建了一个jsFiddle，以便更轻松地测试代码：http://jsfiddle.net/alokjain_lucky/vHVcP/

请不要让图像被裁剪，或拉伸以使它们的高度相等。

Answer 1

如果您不想在缩略图上压缩图像高度，只需在缩略图上添加固定高度。

例如：在style.css

中将height: 100px;添加到ul.small-thumb-3 li img

Answer 2

作为CSS的替代方案，这里有一个Wordpress plugin，基本上是为你做的。

Answer 3

用于创建相同尺寸缩略图的有用链接：

http://www.plus2net.com/php_tutorial/php_thumbnail.php

Answer 4

您可以尝试获取每个缩略图的高度，将它们放入数组中，然后使用natsort或类似的方法从最高到最低或其他方式对它们进行排序。那是因为订单无关紧要。通过这种方式，您可以获得相似尺寸的图像，并且看起来会更好看。

获取图像大小： http://php.net/manual/en/function.getimagesize.php

另外你说“我不希望裁剪图像，或者拉伸使图像高度相等”。如果图像无法以任何方式改变，那么几乎没有别的办法......

编辑：这是一个稍好看的版本：http://jsfiddle.net/vHVcP/10/

Answer 5

在图像周围放置边框，然后在边框内动态居中图像。

http://jsfiddle.net/saluce/vHVcP/19/

Answer 6

我为我的要求创建了以下解决方案： http://jsfiddle.net/alokjain_lucky/vHVcP/