解决Chrome浏览器图片缩放模糊的三种方法

起初开发网页时，都把图片尺寸精心设计好，图片多大就做成多大，而且还尽量压缩，这样才利于网页快速载入，增强用户浏览体验。

但现在手机时代了，用手机浏览网页，就会发现PC端正常效果的图片却显得模糊。

于是需要把图片原始尺寸做大一些，再等比例缩小嵌入网页，这样手机端看图片就会很清晰。

比如，420×336（px）的图片等比例缩小，以320×256（px）的规格嵌入网页：

<a href="http://www.furuijinzhao.com/_gb/service_cleaning.html">
  <img src="_img/clean.jpg" width="320" height="256" alt="清洁服务" />
</a>

但发现，在chrom浏览器中，缩小尺寸的图片显示失真、不清晰。

 

经过搜索、完善，总结出三种CSS解决方法。

方法一：

img {
	/*......*/
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
	-moz-backface-visibility:hidden; 	/* Firefox */
	-ms-backface-visibility:hidden; 	/* Internet Explorer */
}

方法二：

img {
	/*......*/
	image-rendering:-moz-crisp-edges; /* Firefox */
	image-rendering:-o-crisp-edges; /* Opera */
	image-rendering:-webkit-optimize-contrast; /*Webkit (non-standard naming) */
	image-rendering:crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

方法三：

img {
	/*......*/
	filter:blur(0);
	-webkit-filter:blur(0);
	-moz-filter:blur(0);
	-ms-filter:blur(0);
	transform:translateZ(0);
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
}

再看图片，正常清晰了。

 

三种方法，任选其一或共存皆可，具体哪种方法好，请您自行测试。