起初开发网页时,都把图片尺寸精心设计好,图片多大就做成多大,而且还尽量压缩,这样才利于网页快速载入,增强用户浏览体验。
但现在手机时代了,用手机浏览网页,就会发现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);
}
再看图片,正常清晰了。
三种方法,任选其一或共存皆可,具体哪种方法好,请您自行测试。