解决缩略图的图像显示大小问题
Solve Image display sizing issue for thumbnails
我正在尝试构建一个从 amazon.in.I 中提取的交易页面，基本上是去交易并复制图像并上传到我的服务器。
但是由于 amazon.in 上的图像大小不同，当我将交易缩略图缩小 200*200 大小时，一些图像会变形。
在下图中，您可以看到 Amazon Basics 电缆已正确缩放，其中 iphone 7 图像由于 amazon.in 处图像的性质而变形。
这些问题的一般建议是什么？我们如何解决这个问题，以便我的交易获得统一的图像？
如果图像的纵横比不是1:1（这是缩略图的比例）它会变形 因为一个维度的长度比另一个维度长，如果试图匹配它们，其中一个将不得不被挤压。这就是失真的来源。
唯一可行的方法是为图像提供与您的模板匹配的新纵横比
这个可以用CSS来完成，就像@SaidbakR中提到的评论
Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.
这会很好地工作，但有些图像将无法工作。他们只会在错误的地方被截断。
您唯一可以做的另一件事是在 Photoshop 或类似工具中手动编辑照片。 这适用于所有图像，但是手动编辑每张不适合的照片是一件令人头疼的事情。
尽管如此，这就是您的最终结果。
之前： 全尺寸原始图像
修改后： 在 Photoshop 等程序中将图像编辑为所需的 200x200 大小且无失真
所以呢？我建议的 解决方法是调整您的 approach/template 或为您的图片寻找其他来源。
我正在尝试构建一个从 amazon.in.I 中提取的交易页面，基本上是去交易并复制图像并上传到我的服务器。 但是由于 amazon.in 上的图像大小不同，当我将交易缩略图缩小 200*200 大小时，一些图像会变形。
在下图中，您可以看到 Amazon Basics 电缆已正确缩放，其中 iphone 7 图像由于 amazon.in 处图像的性质而变形。 这些问题的一般建议是什么？我们如何解决这个问题，以便我的交易获得统一的图像？
如果图像的纵横比不是1:1（这是缩略图的比例）它会变形 因为一个维度的长度比另一个维度长，如果试图匹配它们，其中一个将不得不被挤压。这就是失真的来源。
唯一可行的方法是为图像提供与您的模板匹配的新纵横比
这个可以用CSS来完成，就像@SaidbakR中提到的评论
Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.
这会很好地工作，但有些图像将无法工作。他们只会在错误的地方被截断。
您唯一可以做的另一件事是在 Photoshop 或类似工具中手动编辑照片。 这适用于所有图像，但是手动编辑每张不适合的照片是一件令人头疼的事情。
尽管如此，这就是您的最终结果。
之前： 全尺寸原始图像
修改后： 在 Photoshop 等程序中将图像编辑为所需的 200x200 大小且无失真
所以呢？我建议的 解决方法是调整您的 approach/template 或为您的图片寻找其他来源。