CSS image down-scaling

I'm putting together a book flip where I flip pages using CSS, JavaScript and HTML. It works very well, except for this one thing.

Every image has a block-level parent. The block-level parent's dimensions has the same ratio as the image but it's scaled down to fit inside the window. Every image has a width:100%; and height:100%; declaration making it fit directly inside its block-level parent.

Now, this wo开发者_开发问答rks great but when I start sliding the pages the animation's VERY slow and laggish because I scale the images down. If I remove the width and height declaration from the images the animation runs smoothly but the images exceed their block-level parent's dimensions.

What can I do to fix this? Creating a new image with new dimensions isn't an option since I want the images to fit inside every screen resolution.

The animation is only slow in the following browsers/OS'es: Opera 10, Mac Chrome 6, Mac Firefox 3, Windows

Safari 5 and Firefox 3 on Mac and IE7 on Windows handle the animation very well but there are some browsers, where the performance gets killed when scaling down images.

I'm not sure if this will work in your use-case, but have you tried setting the images/blocks to display: absolute or display: fixed?

Because absolute and fixed elements are not in the flow, they do not cause reflows when their properties change, so that can drastically help speed things up, depending on the circumstances.

Could we see a little code, or maybe a live example?

Some browsers are very slow at image scaling. Chrome 8 is the worst at this, in my experience, being about 5x slower than FF3.6 when resizing large images.

You can use Canvas as a workaround on browsers that support it. It's not faster at the actual scaling (yet), but it lets you guarantee that you only scale the images once, when they're loaded, instead of over and over during rendering.