How do I resize an image while keeping its dimensions using jQuery?

Question

I have this script that enlarges an image thumbnail on hover.

The problem is that some images are different heights so the script sometimes stretches them out of proportion. Most images are 100x100, but sometimes they are 100x140, etc.

Is there a way to preserve the image dimension on resize?

$("ul.gallery-large li").hover(function () {
$(this).find('img').addClass("hover").stop()
    .animate({
    width: '200px',
    height: '200px',
}, 200);

}, function () {
$(this).find('img').removeClass("hover").stop()
    .animate({
    width: '100px',
    height: '100px'
}, 400);
});

Answer 1

You could try:

$("ul.gallery-large li").hover(
    function () {
        $(this).find('img').addClass("hover")
            .animate({width: '200px'}, 200);
    }, function () {
        $(this).find('img').removeClass("hover")
            .animate({width: '100px'}, 400);
    }
);

and CSS:

ul.gallery-large li img{height:auto}

Here it is working: http://jsfiddle.net/dxFq6/1/