.animate() 中 <img> 的宽度和高度问题答案

【问题标题】：Problem with width and height of an <img> in .animate().animate() 中 <img> 的宽度和高度问题
【发布时间】：2010-02-12 02:38:21
【问题描述】：

我有一个 div。 div 内部是另一组 div，每个 div 都包含一个 img。我正在尝试设置一个鼠标悬停，使当前的 img 使用 .hover() 和 .animate() 展开。我希望代码确定它是横向还是纵向图像，然后将其扩展为宽度或高度，以不超过包含 div 的范围。

这是准备好的文档内的代码。

$('.clGalleryImage').hover(function() {
    $varHeight = $('.clGalleryImage:hover').height();
    $varWidth = $('.clGalleryImage:hover').width();
    if($varHeight > $varWidth) {
        $('.clGalleryImage:hover').animate({marginTop:0, height:125}, 'slow');
    } else {
        $('.clGalleryImage:hover').animate({marginLeft:0, width:125}, 'slow');
    }
}, function() { 
    ...
});

.hover 的 handlerOut 部分不完整，因此请忽略它。问题出在 handlerIn 上。当我将鼠标悬停在纵向的 img 上时，该功能效果很好。图像的宽度和高度按比例增长，并在包含 div 的边界处停止增长。但是，当我将鼠标悬停在景观 img（上面代码中的 else）上时，它只会按比例增长，而不是按比例增长。这是设计的吗？

如果这是一个新手问题，我深表歉意，但它一直困扰着我一整天。最终，我将其编码为围绕我选择的图像手动工作。我宁愿代码与图像的任何比例一起工作，然后在使用它之前必须编辑图像。

谢谢

我想我应该包括 div 和 CSS。

div

<div class="clGalleryImageContainer">
    <img class="clGalleryImage" src="/New/Images/Molds/Molds001_th.jpg" alt="Mold Gallery Image 001" title="This is some description Text." />
</div>

CSS

.clGalleryImage { display:block; height:100px; margin-left:auto; margin-right:auto; margin-top:12px;}
.clGalleryImageContainer { position:relative; float:left; width:150px; height:125px; border: 1px solid white; background-color:black; margin-top:12px; margin-left:21px; margin-bottom:12px;}

【问题讨论】：

标签： jquery

【解决方案1】：

您在 CSS height:100px; 中设置了高度，因此 .animate() 将尊重此样式并在整个动画过程中保留它。在另一个动画中，你明确告诉它改变高度，所以它会。

所以答案是是的，这是设计使然。

【讨论】：

感谢您指出这一点。一个人怎么能错过最简单的事情，真是令人惊讶。顺便说一句，有没有办法在 CSS 中设置高度并强制 jQuery 忽略它？否则我必须让我的缩略图都高 100 像素。
@Albion - 有一些插件可以保持比例，这将是最快的路线，尝试类似：ditio.net/2010/01/02/jquery-image-resize-plugin 你可以输入它的高度、宽度或比例，它会停止当它达到任何限制时，保持纵横比。