CSS缩放图像上的Javascript转换表现不佳

我正在制作一个头版图库，其中有几个图像，通过CSS缩放以适应页面

图像从一个图像到下一个图像（彼此重叠）逐渐淡入淡出，如果用户调整浏览器大小以使用空间，图像将重新调整大小

问题是，图像褪色在大多数浏览器和除最新计算机外的所有计算机上都表现得很糟糕

但是，如果图像没有拉伸，则大多数计算机上的所有浏览器的性能都是完美的。

我曾经在我设计的其他网站上遇到过这个问题，并且花了大量时间研究和测试解决方案，但我似乎什么也找不到

有什么想法吗

---

我已经实现了性能/样式的权衡。我没有随意缩放图像，比如说按因子0.7543234，而是将其四舍五入到8，以此类推。我发现任意缩放因子都会带来巨大的性能损失，使用单十进制缩放可以大大降低这一点

下面是一些js代码：

var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);

var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);

• newWidth是所需的宽度
• originalImage.width是我的数组，其中 我保留原始图像大小 （由于js非常智能，因此无法访问 这些在它被缩放之后）
• roundNumebr是一个函数 缩放到最接近的小数点

函数轮号（num，dec）{
var result=Math.round（num*Math.pow（10，12月））/Math.pow（10，12月）；
返回结果；
}

---

在此之后，褪色效果提高了约50%，但仍不完美。非常感谢您的帮助，希望这对其他人有所帮助。

由于浏览器缩放和显示信息和图片的方式，性能下降

尝试将以下内容添加到任何要缩放的内容：

-ms-interpolation-mode: nearest-neighbor;
image-rendering: optimizeSpeed;

这会在缩放图像时关闭过滤，使其在速度较慢的机器上更快

动画完成后，将元素的样式设置为：

-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;

此外，舍入脚本在舍入时似乎调用了很多数学，重复多次（如在动画中）会非常慢。您可以通过使用此精简版本替换舍入脚本来减少开销：

var roundNumber = function (num) {
    return ~~(num + .5);
    //this take a number (num), adds .5, then chops off the decimal place. 
}

---

我看不到任何提高，但我使用过JQuery插件，比如：当浏览器调整大小时，图像质量从未下降，除非计算机已经被其他系统征税。你介意分享一些代码吗？这在你发给我的链接上是很明显的。链接中的代码将图像修改为100%高度和100%宽度，并将其周围的a标记设置为类似于宽度：1462px；高度：1096.5px；。可能您使用的浏览器太快，或者您的计算机太快。在Firefox（最新浏览器）或IE（如果有）中试用。同时将浏览器的大小调整为最大大小。在我的电脑上，速度非常慢，而且有点神经质，我正在运行一台2ghz的Core2Duo mac Mini，我已经在Chrome、Ie9、FireFox和Opera上进行了测试，它们都很流畅。在运行其他浏览器的虚拟机上测试它，我可以看到您在说什么。不幸的是，我不认为有一个干净的方法来解决这个问题，除了限制JS必须做的数学。JS在很多数学/三角运算方面做得不好，所以我建议在进行小计算时使用整数，或者只使用1个小数点，以避免性能下降。是的，这就是我上面实现的解决方案。谢谢你的帮助。