Having trouble implementing -webkit-transform to scale up images in a photo gallery

I have a conceptual question about photo galleries like this:

http://www.nikesh.me/demo/image-hover.html

If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.

This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.

So, normal images are first scaled down:

-webkit-transform:scale(0.8);

And then upon hover scaled up:

-webkit-transform:scale(1.2);

My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.

What I want:

• The full effect in browsers that support it. Important is that the zoomed version remains quality.
• No effect at all for browsers that do not support it, yet a solid original dimension so that 开发者_如何学编程no layout is broken
• It should work for both image orientations and there may be variety in image widths and heights too

Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.

If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.

<img src="yourImageSrc" width="80%" height="80%">

This would allow you to still keep your layout in tact if the user agent is not up to date.

** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.