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

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

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

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

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

但发现，有一个很奇怪的现象，在chrom浏览器中，缩小尺寸的图片显示失真、不清晰。

大概的总结出有三种方法

方法一：

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);
}

以上这篇解决Chrome浏览器图片缩放模糊的三种方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。