javascript - Scaling an image doesn't work as expected? -

i'm scaling image down using scale transform. that's working fine, except original image size used calculate page size horizontal/vertical scrolls in huge empty page. bit confused on how works, isn't scale supposed reduce/enlarge image?

can somehow rid of "extra" space not used? don't need css solution, using javascript here fine.

fiddle: http://jsfiddle.net/kcycm/

edit

@jgv solution posted below size image properly, doesn't solve issue scaling.

if try using approach, , instead try scale image funny effect. zooms in in part of image , scrollbars displayed again. when image scaled down doesn't affect other when it's scaled does? expected?

fiddle: http://jsfiddle.net/kcycm/6/

try wrapping image in div , specifying dimensions of wrapper. no css3 works.

<div style="height: 300px">   <img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/les_invalides_de_paris_ceiling_huge.jpg" style="max-height: 100%; max-width: 100%"/> </div> 

example: http://jsfiddle.net/kcycm/5/