CSS图像缩小答案

【问题标题】：CSS image down-scalingCSS图像缩小
【发布时间】：2010-09-13 22:15:12
【问题描述】：

我正在制作一个翻书，我使用 CSS、JavaScript 和 HTML 翻页。效果很好，除了这一点。

每个图像都有一个块级父级。块级父级的尺寸与图像具有相同的比例，但它被缩小以适合窗口内。每个图像都有一个宽度：100%；和高度：100%；声明使其直接适合其块级父级。

现在，这很好用，但是当我开始滑动页面时，动画非常缓慢且滞后，因为我缩小了图像。如果我从图像中删除宽度和高度声明，动画会顺利运行，但图像会超出其块级父级的尺寸。

我能做些什么来解决这个问题？创建具有新尺寸的新图像不是一种选择，因为我希望图像适合每个屏幕分辨率。

动画仅在以下浏览器/操作系统中很慢：歌剧 10，Mac 铬 6, Mac 火狐3，Windows

Mac 上的 Safari 5 和 Firefox 3 以及 Windows 上的 IE7 可以很好地处理动画，但是有些浏览器在缩小图像时会降低性能。

【问题讨论】：

【解决方案1】：

我不确定这是否适用于您的用例，但您是否尝试将图像/块设置为 display: absolute 或 display: fixed？

因为绝对和固定元素不在流程中，所以当它们的属性发生变化时它们不会导致回流，因此可以根据具体情况极大地帮助加快处理速度。

我们能不能看一点代码，或者一个活生生的例子？

【讨论】：

【解决方案2】：

某些浏览器的图像缩放速度非常慢。根据我的经验，Chrome 8 在这方面最差，在调整大图像大小时比 FF3.6 慢 5 倍左右。

您可以在支持它的浏览器上使用 Canvas 作为解决方法。实际缩放时（目前）并没有更快，但它可以让您保证仅在加载图像时缩放图像一次，而不是在渲染期间一遍又一遍地缩放。

【讨论】：