如何防止Chrome调整图片大小时出现模糊现象? [英] How to prevent blur on image resize in Chrome?

问题描述

如果您使用调整图像大小，则图像实际上是模糊的，例如显示具有调整大小的尺寸的小图像，例如；

The images are really blurry if you use resize an image, for example showing a small image with resized dimensions, like;

<img src="largeimage.jpg" width=30 height=30 \>

在其他浏览器中它并不模糊，但是在Chrome中，它是如此模糊.我在www.twitter.com上查看过，他们的新设计具有很多调整大小后的图像，并且某种程度上，他们设法清除了调整后大小的图像中的模糊.我已经尝试过这些；

Its not blurry in other browsers, but in Chrome, its so blurry. I have looked at in www.twitter.com , their new design has lots of resized images and somehow, they have managed to clear blur in resized images. I have tried these;

image-rendering: crisp-edges;
image-rendering: pixelated;

但是不幸的是，它不能解决问题.

But unfortunately, it doesn't solve the problem.

下面是一个比较.与右侧相比，左侧可以看到非常模糊:

Below is a comparison. On the left, you can see that it is quite blurry, compared to that on the right:

正确的方法是什么?

推荐答案

您尝试过吗?:)

filter: blur(0);
-webkit-filter: blur(0);
transform: translateZ(0);
-webkit-transform: translateZ(0);

这篇关于如何防止Chrome调整图片大小时出现模糊现象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！