image - 使 Firefox 图像缩小类似于 Chrome 或 IE 中的结果

Question

左侧是原始 PNG，右侧是使用宽度和高度缩小到原始大小大约一半的版本。

为什么调整大小后的图像在 Firefox 中看起来如此模糊？在不更改图像文件的情况下我可以做些什么吗？如果图像包含大量数学或文本，模糊性尤其令人烦恼。

Answer 1

我知道这已经晚了，但是您可以通过应用轻微的旋转来欺骗 Firefox 更好地渲染图像。我尝试translate()图像以获得相同的效果...但无济于事。

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

Javascript

if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}

我不惜一切代价避免浏览器嗅探。我从 yepnope.js 借用了这个嗅探，我对此并不感到难过。

还值得注意的是，同样的技巧可以用于在 webkit 和 firefox 中强制进行子像素图像渲染。这对于非常慢的动画非常有用 - 最好通过示例进行解释:

http://jsfiddle.net/ryanwheale/xkxwN/