Question

当在WebKit中调整图像（徽标）的大小时，我们遇到了问题，它是锯齿状的几秒钟。我们已经尝试通过改变CSS的宽度和使用比例转换来调整它的大小。有什么方法可以解决这个问题吗？

enter image description here

示例HTML：

<div>
  <img src="http://i.imgur.com/LoN4Mnz.png">
</div>

CSS：

div {
  width: 300px;
  height: 100px;
  background: #ddd;
}

img {
  max-width: 100%;
}


div:hover img {
  width: 200px;
}

Answer 1

对于具有短延迟的图像的抗锯齿似乎是一个问题。我的搜索没有得到任何关于如何解决这个问题的好答案，所以我提出了两种可能的解决方案。

解决方案1 

预先渲染两个版本的图像，然后在不同尺寸之间切换。

优点：完美渲染

缺点：占用更多内存

解决方案2

使用image-rendering CSS属性禁用抗锯齿功能。通过向div添加image-rendering: [browser specific see codepen fork];，您可以看到图像的渲染与没有抗锯齿的情况一样好。

优点：所有CSS，没有额外的内存消耗

缺点：较低的图像质量

编辑：解决方案3

第二，可能会有不同的解决方案。图像并不特别适合渲染文本，但由于它是一个徽标，我猜你在文本或样式上有某种特殊的扭曲。如果你可以将徽标导出为svg并在画布中渲染它，你可以解决这些问题。