与网页互动时，图片的质量下降 [英] Images losing quality for second when interacting with page
问题描述
当页面获得任何移动方式时 - 窗口调整大小，滚动，悬停，用作图标的图像会重新渲染并使侧边ruff，它在透明背景和圆形边框（如示例）的图像上非常清楚，有什么办法来解决这个问题？示例
When page gets any way of movement - window resizing, scrolling, hover, images used as icons does re-render and makes sides ruff, its very well seen on images with transparent background and circular border (like in example), is there any way to fix that? Example
<body>
<style>
body{
background: black;
}
img{
max-width: 5vw;
transition: 1s ease;
}
img:hover{
max-width: 6vw;
}
</style>
<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png">
</body>
在这种情况下，当悬停时，图像将出现尖锐的边框，有些可能会说像素化，毫秒，它会回到平滑的边界，
这里是一个小提琴为你 - http://jsfiddle.net/ o3qk5uaL /
in this case when hovered, image will appear with sharp borders, some may say pixelated, and after some miliseconds it will go back to smooth borders, here is a fiddle for you - http://jsfiddle.net/o3qk5uaL/
推荐答案
好问题！
这不是一个问题，它如何web浏览器呈现图片和如何过渡的行为 - 你是通过将图片绑定到动态窗口大小重新绘制图片ratio - 图片大小正在重新计算，浏览器将不会完全绘制，直到你停止。
原始图片具有其分辨率，并且在更改时需要以新分辨率渲染图片，并且依赖于浏览器以及依赖于GPU的图片时，其原始分辨率将最佳。
This is not a problem, its how the web-browser renders the picture and how the transition acts - you are repainting the picture by binding the picture to a dynamic window size ratio - the picture size is being recalculated and the browser will not paint it completely until you stop. The original picture has its resolution and will look the best at its original resolution when changing that the picture need to be rendered at the new resolution and that is browser dependent, and GPU dependent.
我发现了一个小的解决方法，可能会帮助你 - 尝试使用SVG格式的那些非常动态的分辨率更改图标。 SVG没有任何分辨率，它的基于XML的矢量图像格式，他们是伟大的互动和动画。
看看这个比较演示： CodePen
CODE：因为我们必须...
CODE: because we have to...
<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" />
<br /><br />
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />
这篇关于与网页互动时，图片的质量下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
