如何在使用jQuery保持尺寸的同時調整圖像大小？

Question

我有這個腳本可以放大懸停時的圖像縮略圖。

問題是，一些圖像是不同的高度，所以腳本有時會伸展它們不成比例。大部分圖像是100×100，但有時他們是100x140，等

有沒有辦法保存在調整圖像的尺寸？

$("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

你可以嘗試：

$("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); 
    } 
); 

和CSS：

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

這是工作：http://jsfiddle.net/dxFq6/1/