我正在整理一本书翻页，我用CSS，JavaScript和HTML翻页。除了这一点之外，它的效果非常好。
每个图片都有一个块级父级。块级父级的尺寸与图像具有相同的比例，但是它按比例缩小以适合窗口内部。每张图片的宽度均为100％;和身高：100％;声明使其直接适合其块级父级。
现在，这很有效，但是当我开始滑动页面时，动画非常缓慢而且迟钝，因为我缩小了图像。如果我从图像中删除宽度和高度声明，则动画可以顺利运行，但图像超出了块级父级的尺寸。
我该怎么做才能解决这个问题？创建具有新尺寸的新图像不是一种选择，因为我希望图像适合每个屏幕分辨率。
动画在以下浏览器/操作系统中速度很慢： Opera 10，Mac Chrome 6，Mac Firefox 3，Windows
Mac上的Safari 5和Firefox 3以及Windows上的IE7都可以很好地处理动画，但是有些浏览器在缩小图像时性能会被杀死。
答案 0 :(得分：0)
我不确定这是否适用于您的用例，但您是否尝试将图片/块设置为display: absolute或display: fixed？
由于绝对元素和固定元素不在流中，因此它们的属性发生变化时不会引起回流，因此可以根据具体情况大幅提升速度。
我们能看到一些代码，还是一个现实的例子？
答案 1 :(得分：0)
某些浏览器在缩放图像时速度很慢。根据我的经验，Chrome 8是最糟糕的，在调整大图像大小时，比FF3.6慢约5倍。
您可以在支持它的浏览器上使用Canvas作为解决方法。它在实际缩放（但尚未）时并不快，但它可以保证您只在加载时将图像缩放一次，而不是在渲染过程中反复缩放。