动态调整图片大小的最佳方式

Question

这是一个模糊的问题，但我正在寻找那些有过这个问题经验的人的建议和建议。我有一个不同大小的产品图像的PHP数组，我希望在我的网页上显示四行到一行。问题在于，因为它们的大小不同，所以我不知道如何在没有它们的情况下显示它们。

下面是一个看起来很奇怪的情况的例子：

我不知道定位这些图像的最佳方法，因此它们看起来并不“奇怪”。再一次，我知道这有点模糊，但也许有人有过这方面的经验？其他购物网站如何处理这个问题？

由于

Answer 1

您是否考虑过精彩的masonry jQuery插件？

编辑：也可以不使用jQuery：http://vanilla-masonry.desandro.com/

Answer 2

如果可以，我建议您查看our service，其中包括云中的图像转换（以及通过快速CDN传送）。

您可以使用基于重力的裁剪，同时保持纵横比或基于裁剪的面部检测，以达到所需的图像。生成100x100 JPG上传图像名为“face_top”的一些示例：

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_north/face_top.jpg

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_south/face_top.jpg

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_face/face_top.jpg

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/face_top.jpg

还有更多transformation options可用。

Answer 3

我在另一个问题中有answered something similar，我在其中添加了一个如何将图像大小调整为固定缩略图尺寸的示例，并可选择保持纵横比（和信箱）或裁剪内容到所有的拇指都是一致的。

请查看http://pastebin.com/STzAxrZA并注意image_resize_jpg（）中的$ maximize参数

我想您需要决定是否尝试更改HTML（并保留奇数尺寸的图像）或更改缩略图图像的生成方式