图像在Chrome中看起来分辨率低且模糊

Question

我注意到网站上的一些图片在Chrome和Mozilla中看起来分辨率很低，看起来不错。

以下是截图

在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+                */
}

这是我添加图像渲染时的样子：像素化;

Answer 1

看起来Chrome会做一些抗锯齿。因此，首先，它可能有助于将图片保存为所需的大小（例如，当您不应用任何大小调整时，例如使用CSS，它会正确显示）。然后，根据CanIUse，对于Chrome，CSS应该读取image-rendering: pixelated;而不是 image-rendering: -webkit-optimize-contrast; 注意：Safari的值也已更改，MS不支持它已经/在Edge。

Answer 2

测试一下：

1。脉冲“Ctrl + 0”（零） 它恢复到 100% 的网页大小。

2. 没有使用样式或宽度属性调整图像大小。将您的图片设计成您需要的确切尺寸。

它对我有用。 ;)