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

Question

3

这有点含糊不清，但我正在寻求建议，也许是那些在这个问题上有经验的人的建议。我有一个包含不同尺寸产品图片的PHP数组，我想在我的网页上以每行四个的方式显示它们。问题在于，由于它们尺寸不同，我不知道如何在不使它们全部看起来很“奇怪”的情况下展示它们。

以下是一个看起来很奇怪的情况的示例: Weird situation

我不知道最佳的位置放置这些图像，以使它们看起来不“奇怪”。再次说明，我知道这有点含糊，但也许有人有经验处理此问题？其他购物网站如何处理这个问题？

谢谢

- Jon Rubins

1

为了防止图像变形，您需要保持纵横比。现在您需要决定哪个是更重要的，高度还是宽度？然后您可以使用GD库进行调整大小。 - Adi

我认为您可以使用PHP和GD的帮助来创建每个图像的缩略图，或者使用JavaScript在浏览器上显示图像时“调整”图像的大小。 - mpratt

1

找不到梅根·福克斯的图片集吗？那是粉色还是鲑鱼色？ - Mike Purcell

3个回答

1

如果可以的话，我建议您查看我们的服务，其中包括云端图像转换（并通过快速CDN进行交付）。

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

100x100, Fill, North

100x100, Fill, South

100x100, Fill, Face

100x100, Thumb, Face

还有更多转换选项可用。

- Cloudinary

0

我在另一个问题中回答了类似的内容，其中我添加了一个示例，说明如何将图像调整为固定的缩略图尺寸，并选择保持纵横比（并添加黑边）或裁剪内容以使所有缩略图一致。

请查看http://pastebin.com/STzAxrZA，注意image_resize_jpg()中的$maximize参数

我想你需要决定是要更改HTML（并保留奇数大小的图像），还是更改生成缩略图图像的方式。

- Scuzzy

也许我可以按大小对图像数组进行排序，然后将大小相似的图像放在同一行。当然，这并不是很可靠。 - Jon Rubins

JavaScript也可以用来确定每一行的最高图像高度，并将所有其他同级div元素设置为该高度，但仍会遇到空白间隙问题。我个人更喜欢裁剪图像，使得所有缩略图大小一致。 - Scuzzy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Will Demaine · Accepted Answer

你是否考虑过极好的瀑布流jQuery插件？

编辑：还有不需要jQuery的版本：http://vanilla-masonry.desandro.com/