image quality deteriorates when used more than once
在我的 html 页面中,我将图像包含为
1
|
<img src=”http://i44.tinypic.com/w2o9kh.png” border=”0″ alt=”Image by TinyPic”>
|
我从外部 css by
设置它的样式
1
|
img {width:2em;height:2em; }
|
但是我注意到,如果在一个页面中多次使用同一图像,图像质量会下降。
在 Firefox 中比较 http://jsfiddle.net/aJ333/50/ 和 http://jsfiddle.net/zxgQr/。第一个笑脸的质量更差。
关于为什么会发生这种情况以及如何保持质量的任何见解?
附言我已经检查过即使图像位于不同的 div 容器中也会发生这种情况。
附言这似乎是特定于浏览器的:
镀铬的质量都很好
在 IE9 中两者都是劣质的
在 Firefox 中,笑脸的质量在第一小提琴中更差。
我希望它至少可以在 Firefox 中工作。
我是 html 新手,如果这很明显,请多多包涵
- 不幸的是,这是 Firefox(似乎是 IE)中的一个已知错误,请参阅错误报告:此处和后续跟进。
- @pjumble 感谢您的参考。在这种情况下我可以使用一种已知的解决方法来保持图像质量吗?例如我尝试使用 div 容器将它们分开,但这不起作用。
- 我注意到未缩放的笑脸比您想要渲染的要大得多。如果您使服务器上的图像大小更接近它的使用方式,它是否有帮助?
- 好点@Andrew Morton,我想知道为什么我在实际使用中没有遇到这个错误。缩放的图像质量(在 IE / Firefox / Opera 中)似乎仅在您包含图像两次并且源图像的大小超过您显示的两倍时才会成为问题。 jsfiddle.net/aJ333/54
您正在为图像设置高度和宽度值。如果这些值大于或小于图片的实际尺寸,浏览器必须对其进行缩放。此过程会更改图片的分辨率,使其看起来有些模糊。
来源:https://www.codenong.com/17380212/