如何在使用jQuery保持其尺寸的同时调整图像大小?

时间:2013-05-17 10:45:02

标签: jquery image hover image-size

我有这个脚本在悬停时放大图像缩略图。

问题在于某些图像的高度不同,因此脚本有时会使它们不成比例地延伸。大多数图像是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);
});

1 个答案:

答案 0 :(得分: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/