1

我正在使用 jQuery 在悬停图像时对其进行动画处理。我需要它能够使用浏览器重新调整大小/缩放。问题是我无法溢出：隐藏工作，因为我的 div 上没有固定高度。我希望宽度为 100%，我需要高度为 div 宽度的 50%。请帮忙

链接到我的示例 http://www.jasalounge.com/tester/

    $(function(){
        $("#box1 a").hover(function(){
            $("img", this).stop().animate({top:"-50%"},{queue:false,duration:150});
        }, function() {
            $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
        });
    });


#box1 {
    width:100%;
    max-width:250px;
    border:none;
    overflow:hidden;


}
#box1 img {
    width:100%;
    position:relative;

}



     <div id="box1"><a href="#"><img src="images/test3.png" alt="test"/></a></div>
4

1 回答 1

0

将您的动画功能更改为

$(function(){
    $("#box2 a").hover(function(){
        $("img", this).stop().animate({top:"-" + $("img", this).height() / 2 +"px"},{queue:false,duration:150});
    }, function() {
        $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
    });
});

将 CSS 更改为

#box2_wrapper{
    width:30%;
}
#box2 {
    overflow:hidden;
    border:none;
    height:0;
    padding-bottom: 90%;
}

#box2 img {
    width:100%;
    position:relative;
}

和 html 到

<div id="box2_wrapper">         
    <div id="box2">  
        <a href="#"><img style="top: 0px;" src="test_files/test3.png" alt="test"></a>
    </div>
</div>

这会将您的盒子 div 包装在一个包装器中，您可以根据需要调整其大小。在这种情况下，box2 会变成一个长宽比为 10:9 的盒子，因为 padding-bottom 90% 是包装器宽度的 90%。它是 90%，因为您的图像是 10:18 纵横比，并且您希望一次显示一半。

使用 CSS 保持 div 的纵横比

和

保持 div 高度与纵横比相关

解释这样做的技巧

于 2013-08-18T09:48:54.140 回答