Jquery hover animation 브라우저 창에서 크기 조절

Question

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> 

Answer 1

이

$(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는 패딩 하단 90 %가 래퍼 너비의 90 %이므로 10 : 9 종횡비의 상자가됩니다. 이미지의 가로 세로 비율이 10:18이므로 한 번에 절반 씩 표시하려는 경우 90 %입니다.

Maintain the aspect ratio of a div with CSS

및

Keep div height relevant to aspect ratio

그것은 거의 완벽하게 작동하고이