jquery를 사용하여 div 크기를 조정하면 자식 이미지의 가로 세로 비율이 줄어 듭니다.

Question

div의 현재 크기와 일치하도록 div를 크기 조정하는 코드가 있습니다. <ul>. 는 CSS에서, 로고 <img>는 다음과 같은 속성이 있습니다

.logo img { 
    height:100%; 
    width:auto; 
} 

이미지 그러나 어떤 상황에서는, 그것은에 포함 된 DIV하고, 가로 세로 비율을 유지해야 자동 높이만큼 키가 될 것이라고 의미를 크기가 조정되면 이미지가 늘어납니다. 현재 코드의 기본 버전은 다음에서 찾을 수 있습니다. http://flatpackstudios.com/2014%20Site/index.html

브라우저 메뉴를 작게 만들면 검은 색 메뉴가 텍스트의 2 줄 또는 3 줄로 줄면서 가로로 확장됩니다 따라서 한 줄로 되돌아갑니다 (그러나 세로로 스크롤 할 수 있도록 창을 충분히 짧게 유지). 그런 다음 .logo img에있는 width:auto이 아래로 스크롤하면 시작되지 않고 이미지가 늘어납니다.

그리고 마지막으로, 부모 상자 자체에 대한 CSS와 jQuery를 : 여기에

는 문제의 스크린 샷이다

CSS :

.logo { 
    position:fixed; 
    top:17px; 
    left:20px; 
    z-index:100; 
    text-align:right; 
} 

JQuery와 :

$(document).scroll(function(){ 
      if($(this).scrollTop() > stickerTop && $(window).width() > 480) { 
       $("#sticker").css({position:'fixed',top:'0px'}); 
       $(".logo").css({top:'3px', zIndex:'1000', width:'122px', height: stickerHeight - 6, cursor:'pointer'}); 
       $('#page').css('padding-top',stickerHeight + 20); 
      } 

      else { 
       $("#sticker").css({position:'relative'}); 
       $(".logo").css({width: 'auto', zIndex:'auto', height: 'auto', top: '17px', cursor:'default'}); 
       $('#page').css('padding-top','20px'); 
      } 
     }); 

Answer 1

아마 시도 :

.logo img { 
    max-height: 100%; 
    max-width: 100%; 
} 

및 div.logo에 대한 몇 가지 다른 차원은 당신의 목표에 맞게.