使用CSS缩小大图像(缩小尺寸)会导致IE9,FF中的图像模糊,但在Chrome中却很好

Law*_*uza 5 css

我正在使用以下css来显示661px x 343px图像:

width: 95px; height:auto;
Run Code Online (Sandbox Code Playgroud)

我发现使用以下CSS会在Chrome中提供相同的模糊度:

image-rendering:-webkit-optimize-contrast;
Run Code Online (Sandbox Code Playgroud)

所以删除上面的内容使得图像在chrome中更清晰,任何想法如何解决其他浏览器的问题?

Neo*_*Neo 5

一般情况下你不应该这样做,原因是用户将下载更大的图像.

想象一下,如果要在网站上显示2Mb图像,则用户必须下载2Mb文件才能查看较小的图像.最佳做法是调整图像大小并创建缩略图链接.

至于问题是浏览器渲染问题,据我所知,除此之外别无选择.

  • 如果需要的话,有很多时候(将图像缩小到较小的区域),并且stil不回答这个问题:如何获得下采样图像以正确显示抗锯齿而不是锯齿状或模糊.而且由于他已经在页面上显示了更大的图像,那么你的答案更糟糕的是页面性能也需要d/l拇指,因为这相当于浏览器必须管理的http请求数量的两倍. (2认同)