意外的图像模糊

Question

我有一个WordPress网站，该网站存在徽标问题。 如果您在桌面（而不是视网膜）上观看它，它将在加载后模糊但在放大后缩小并缩小其外观变得正常。 源图像高度为100，高度为50，为什么它会变得模糊？

Answer 1

我相信这是创造这个的原始图像分辨率。

根据实际尺寸优化图片可以解决您的问题，或者将自定义CSS设置为以下（使用当前图像大小）：

.nm-header-logo img {
    height: 51px;
}

Answer 2

当图像大于您为50px设置的图像时，浏览器会将图像缩小到该大小。在很多情况下，结果并不好，在某些浏览器（例如Chrome）中甚至可能更糟。最终会出现模糊或锯齿状的边缘。由于你仍然需要视网膜支持，你应该尝试使用2个图像，一个较小的图像，50px高度将加载非视网膜，一个视网膜，两倍大。你必须修改代码：

你可以use this method here.

EG

<img srcset="logo-twice-as-big.jpg 2x"
     src="logo-normal-size.jpg" alt="Logo">

Answer 3

尝试将此属性添加到您的图片。

.nm-header-logo img {
    image-rendering: pixelated;
}

图像呈现属性定义了如果图像从原始尺寸放大或缩小，浏览器应如何呈现图像。

可能的值为：auto |脆边|像素化

pixelated：随着图像改变大小，浏览器将通过使用最近邻居缩放来保留其像素化样式。此值仅适用于按比例放大的图像。