解决缩略图的图像显示大小问题

Question

我正在尝试构建一个从 amazon.in 提取的交易页面。我基本上是去交易并复制图像并上传到我的服务器。 但是由于 amazon.in 上的图片大小不同，当我将其缩小为 200*200 大小以获取交易缩略图时，一些图片会失真。

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

Answer 1

如果图片没有1:1的纵横比（这是缩略图的比例）它会失真因为一个维度的长度比另一个维度长，如果试图匹配它们，其中一个将不得不被挤压。这就是失真的来源。

唯一可行的方法是为图像提供与您的模板匹配的新纵横比

这可以使用 CSS 来完成，例如 cmets 中提到的 @SaidbakR

固定宽度并将图像放置在具有 oveflow:none 和固定高度的 div 中以隐藏额外的高度。

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

您唯一能做的就是在 Photoshop 或类似工具中手动编辑照片。 这适用于所有图像，但手动编辑每张不合适的照片是一件很头疼的事情。

尽管如此，这就是你最终得到的结果。

之前：完整尺寸的原始图像

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

所以？我建议的解决方法是调整您的方法/模板或为您的图像寻找其他来源。