解决缩略图

Question

我正在尝试建立一个从amazon.in拉出来的交易页面。我基本上去处理并复制图像并上传到我的服务器。 但是由于amazon.in上的图像尺寸不同，当我缩小200 * 200尺寸的交易缩略图时，一些图像会变形。

在下图中，您可以看到Amazon Basics电缆已正确缩放，因为amazon.in中的图像性质导致iphone 7图像失真。 这些问题的一般建议是什么？我们如何解决这个问题，以便为我的交易获得统一的图像？

Answer 1

如果图片的宽高比不是1：1 （这是缩略图的比例）会变形因为在一个维度上的长度比另一个维度更长，如果尝试匹配它们，其中一个必须被挤压。这就是失真的来源。

唯一可行的方法是为图片提供与您的模板匹配的新宽高比

此可以使用 CSS 完成，例如评论中提到的 @SaidbakR

  

修正宽度并将图像放在div中，使用oveflow：none和固定高度来隐藏额外的高度。

这将很好地工作，但有些图像将无法正常工作。他们只会在错误的地方被切断。

你唯一能做的就是在Photoshop中用手动编辑照片或类似的东西。 这可以适用于所有图片，但手动编辑每张不合适的照片都是痛苦的。

然而，这就是你最终的结果。

之前：全尺寸原始图片

之后：在Photoshop等程序中将图像编辑为所需尺寸200x200且无失真

所以？我的建议修复方法是调整您的方法/模板或查找图片的其他来源。