如何使用 jQuery 在保持图像尺寸的同时调整图像大小？答案

【问题标题】：How do I resize an image while keeping its dimensions using jQuery?如何使用 jQuery 在保持图像尺寸的同时调整图像大小？
【发布时间】：2013-05-12 12:12:00
【问题描述】：

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

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

【问题讨论】：

标签： jquery image hover image-size

【解决方案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/

【讨论】：

谢谢。周末愉快:)