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

Question

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

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

Answer 1

如果图像的纵横比不是 1:1(这是缩略图的比例)它会变形因为一维的长度比另一维长，如果试图匹配它们，则必须压缩其中一个。这就是失真的来源。

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

这可以像评论中提到的@SaidbakR那样用CSS来完成

Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.

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

您唯一可以做的另一件事是在 Photoshop 或类似软件中手动编辑照片。 这适用于所有图像，但手动编辑每张不适合的照片是一件令人头疼的事。

尽管如此，这就是您的最终结果。

之前:全尺寸原始图像

之后:图像在 Photoshop 等程序中编辑到所需的 200x200 大小，没有失真

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