Facebook Like Box 中的图像被挤压和扭曲 - 我该如何防止这种情况发生?

发布于 2024-12-17 15:45:14 字数 628 浏览 4 评论 0原文

和这里的许多其他人一样,我找不到一种方法来防止常规风景图像在点赞框中变形。我看到有些人对调整图像大小的算法进行了逆向工程,发现它更喜欢纵向而不是横向。

这种扭曲破坏了一个本来很棒的小部件,我想知道是否有机会优先处理这个问题。问题似乎是,为什么图像不简单地按比例调整大小,直到满足最大宽度/高度限制?

相反,宽度和高度似乎是在不考虑图像的原始比例的情况下进行调整的。确实很奇怪!

我本想发布示例,但作为新用户,我似乎不允许这样做!

自从发布上述内容(基于我使用 IE9 的发现)后,我在 Firefox 和 Safari 中测试了我的页面。这两种浏览器以不同的方式显示 Like Box 图像,因为它们的大小调整得更均匀。不幸的是,它仍然不完美,因为它们现在从盒子的右侧延伸出来。以下是 Firefox 中的缩放比例(我的小部件宽度为 300 像素)。

图片 1 320px × 239px(缩放至 300px × 223px)

图片 2 320px × 218px(缩放至 300px × 204px)

由此看来缩放是成比例的并且与框宽度一致。然而,由于左侧有 100 像素左右的边距,这不起作用。在 Safari 中,左侧边距要小得多,因此可以看到更多的图片。为什么 IE 中的缩放比例完全不同,甚至这些浏览器之间的渲染也不同?

Like many others here I cannot find a way to prevent regular landscape images being distorted in the Like Box. I see that some have reverse engineered the algorithm for resizing images and found that it favours portrait orientation over landscape.

The distortion spoils an otherwise great widget and I am wondering if there is any chance that this can be dealt with as a matter of priority. The question seems to be, why is the image not simply resized proportionally until it meets the maximum width/height restrictions?

Instead the width and height appear to be adjusted with no regard whatsoevever for the original proportions of the image. Strange indeed!

I would have posted examples but it appears that, as a new user, I am not allowed to do that!

Since posting the above which was based on my findings using IE9, I have tested my page in Firefox and Safari. Both these browsers display the Like Box images differently in that they are much more proportionally resized. Unfortunately it is still not perfect as they now stretch off the right hand side of the box. Here are the scaling proportions in Firefox (my widget is 300px wide).

Image 1 320px × 239px (scaled to 300px × 223px)

Image 2 320px × 218px (scaled to 300px × 204px)

From this it would appear that the scaling is proportional and in line with the box width. However this does not work due to the 100px or so margin down the left hand side. In Safari the left hand margin is far less and so still more of the picture is visible. Why would the scaling be completely different in IE and even the rendering different across these browsers?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文