jQuery를 사용하여 이미지의 크기를 유지하면서 이미지의 크기를 조정하려면 어떻게해야합니까?

Question

마우스를 올리면 이미지 미리보기 이미지가 확대되는 스크립트가 있습니다.

문제는 일부 이미지의 높이가 다르기 때문에 스크립트가 때로는 비례하지 않도록하는 것입니다. 대부분의 이미지는 100x100이지만 때로는 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/