CSS 缩放图像上的 Javascript 转换效果不佳

Question

我正在处理一个包含多个图像的首页画廊，通过 CSS 缩放以适合页面。

图像从一张到下一张淡化(彼此重叠)，如果用户调整浏览器大小以用完空间，图像将调整大小。

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

但是，如果图像没有被拉伸(stretch)，那么在大多数计算机上的所有浏览器上的性能都是完美的。

我之前在我设计的其他网站上遇到过这个问题，并且花了相当多的时间研究和测试解决方案，但我似乎找不到任何东西。

有什么想法吗？

---

我已经实现了性能/样式的权衡。我没有随意缩放图像，比如按 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 是一个函数缩放到最接近的小数位

函数 roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
返回结果；
}


在此之后，褪色效果提高了大约 50%，但仍不完美。好吧，感谢大家的帮助，希望这对外面的人有所帮助。

Answer 1

由于浏览器缩放和显示信息和图片的方式而导致的性能损失。

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

-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. 
}