html – Microsoft Edge中的像素化图像缩小

发布时间：2020-12-14 19:40:54 所属栏目：资源来源：网络整理

导读：我最近为我的网站制作了一个分辨率为400×400的徽标.它在我测试过的任何其他浏览器中都可以缩小到40×40,但它在Edge中很奇怪.每次刷新页面时,它都会正常呈现一瞬间,然后在页面完成加载后更改为难看的像素化外观. 在页面完全加载之前它的外观(以及我希望它看

我最近为我的网站制作了一个分辨率为400×400的徽标.它在我测试过的任何其他浏览器中都可以缩小到40×40,但它在Edge中很奇怪.每次刷新页面时,它都会正常呈现一瞬间,然后在页面完成加载后更改为难看的像素化外观.

在页面完全加载之前它的外观(以及我希望它看起来如何)：

页面加载时的外观如何：

HTML：

<img src="/images/logo.png" class="logo">

CSS：

.logo {
    width: 40px;
    height: 40px;
}

编辑：这是一个重现我的问题的JSfiddle.

解决方法

图像质量不佳的缩小是Edge中已知的问题,并且已经存在多年了.

我也可以确认您看到简短的平滑重新缩放图像的体验.有时,有时,图像似乎保持平滑缩放！ (似乎确定重新创建问题的一种方法是在页面加载后重新调整图像大小,例如将JSfiddle中的大小设置为50x50px – 在Edge中,图像调整大小并且看起来很糟糕,但是其他浏览器结果很顺利.)

这个问题实际上早于Edge的发布.最近MS似乎已经摆弄它,但他们肯定没有解决它.这是关于它的MS论坛上的一个主题(请注意一些人如何绝望地希望解决问题,将其归咎于显卡！)：https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine

这是2015年8月关于这个问题的另一篇文章,所以这绝对不是什么新鲜事！ https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal

真正深入了解历史,这是另一个演示 – 从2013年开始！ https://bug486918.bmoattachments.org/attachment.cgi?id=428179

(该演示来自对2013年07：07年MS博客帖子的评论,因此它至少已被讨论了四年了！)

自2016年至少11月以来,Edge团队两次报告并确认此问题是一个错误,没有修复……

1 – https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/

2 – https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/

在SO上还有其他一些关于它的帖子.

一个可能的解决方案似乎是相当OTT,将图像添加到画布并重新缩放,但如果你有一个或两个以上的图像,这可能会导致严重的延迟：https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

唯一真正的解决方案似乎是等到MS解决这个问题.现在下注将在哪一年！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!