缩放级别html,.svg在Chrome的特定缩放级别模糊图像

其原因是，使用百分比来设置元件的宽度的标志是在(父元素)

这意味着标志首先从矢量光栅化到内部位图，它是100您为图片设置的大小的百分比。然后在你的#header css规则中，你使用80％作为图片所在的标题元素。

会发生什么情况是浏览器用来保存光栅化矢量图像的内部位图从100％缩放到80％，而不是重新栅格化矢量。由于这涉及插值，会导致一些模糊的边缘。这是浏览器为父母内容所做的性能选择。

解决方案是删除标头(父)元素的80％缩放比例。你可以添加一个新的规则并设置图像宽度(你当然可以使用百分比代替 - 只要父元素不缩放，这不会是一个问题) - f.ex：

#header {

margin: 0 auto;

padding: 0;

text-align: center;

/*width: 80%;*/

}

.header-img {

width:200px;

height:auto;

}

然后在你的HTML代码：

(你也能设置#header img {...}但这有性能损失)。

这里是证明了概念(一个小的差异100％到80％，但可见 - 比较的最后一部分)：

使用100％光栅位图通过浏览器缩放为80％徽标尺寸：

从报头(父)元件卸下80％，例如起见图像宽度为200像素：