我注意到我网站上的一些图片在 Chrome 中看起来分辨率低,而在 Mozilla 中看起来不错。
这里是截图
我该怎么做才能解决这个问题?
我找到了类似的东西,但没有帮助
img {
image-rendering: optimizeSpeed; /* */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
最佳答案
Chrome 似乎做了一些抗锯齿处理。因此,首先,它可能有助于将图片保存为所需的大小(当您不应用任何大小时它会正确显示,例如使用 CSS)。然后,根据CanIUse ,对于 Chrome,CSS 应该读取 image-rendering: pixelated;
而不是 注意:Safari 的值也发生了变化,MS 不再/在 Edge 中支持它。image-rendering: -webkit-optimize-contrast;
关于html - 图片在 Chrome 中看起来分辨率低且模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31842316/