关于前端图片清晰的问题

发布于 2022-09-11 18:18:32 字数 1009 浏览 23 评论 0

1 图片的格式是PNG
2 在chrome上浏览
3 图片要适应显示器的宽度(width 100%)(但是可以肯定,图片的尺寸远远大于屏幕,因为图片是2K以上的,用的显示器是1080的)
在以上情况下,图片显示模糊。
同样的情况下,在火狐浏览器上显示非常清晰。

截图显示如下:
chrome
clipboard.png
火狐
clipboard.png

显示器拍照(可能这里拍的不太好,但是我是想表达,火狐比chrome清晰):
chrome
clipboard.png
火狐
clipboard.png

各位大神有没有办法在所有浏览器都能达到火狐的清晰?

抱歉各位,我自问自答了 - - ,在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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

伴我心暖 2022-09-18 18:18:32

图片的尺寸远远大于屏幕,你确定图片是2k以上?是宽度还是内存。如果是宽度,建议处理下图片

蹲在坟头点根烟 2022-09-18 18:18:32

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) */

}

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文