关于前端图片清晰的问题
1 图片的格式是PNG
2 在chrome上浏览
3 图片要适应显示器的宽度(width 100%)(但是可以肯定,图片的尺寸远远大于屏幕,因为图片是2K以上的,用的显示器是1080的)
在以上情况下,图片显示模糊。
同样的情况下,在火狐浏览器上显示非常清晰。
截图显示如下:
chrome
火狐
显示器拍照(可能这里拍的不太好,但是我是想表达,火狐比chrome清晰):
chrome
火狐
各位大神有没有办法在所有浏览器都能达到火狐的清晰?
抱歉各位,我自问自答了 - - ,在css中加入如下即可:
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) */
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
图片的尺寸远远大于屏幕,你确定图片是2k以上?是宽度还是内存。如果是宽度,建议处理下图片
img {
}