解决Chrome浏览器图片缩放模糊的三种方法 |
您所在的位置:网站首页 › 谷歌浏览器缩小屏幕比例 › 解决Chrome浏览器图片缩放模糊的三种方法 |
起初开发网页时,都把图片尺寸精心设计好,图片多大就做成多大,而且还尽量压缩,这样才利于网页快速载入,增强用户浏览体验。 但现在手机时代了,用手机浏览网页,就会发现PC端正常效果的图片却显得模糊。 于是需要把图片原始尺寸做大一些,再等比例缩小嵌入网页,这样手机端看图片就会很清晰。 比如,420×336(px)的图片等比例缩小,以320×256(px)的规格嵌入网页: ![]() 但发现,在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); }再看图片,正常清晰了。
三种方法,任选其一或共存皆可,具体哪种方法好,请您自行测试。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |