使用jquery調整div大小會導致子圖像丟失寬高比

我有一些代碼調整包含我的徽標的div以匹配單獨的當前高度<ul>。在CSS中，標誌<img>具有以下屬性：使用jquery調整div大小會導致子圖像丟失寬高比

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

含義，圖像會隨着它被包含在div，並自動高度應保持縱橫比爲高，但在某些情況下，圖像在調整大小時伸展。我的當前代碼的基本版本可以在這裏找到：http://flatpackstudios.com/2014%20Site/index.html

當您讓瀏覽器窗口足夠小，黑色菜單換行到2或3行文本，然後水平地展開窗口所以它恢復到一行（但保持窗口足夠短，以便您可以垂直滾動）。當你在.logo img上向下滾動width:auto時似乎沒有啓動，並且圖像伸展。

這裏是有問題的一些截圖：

jquery image scaling issue

最後，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'); 
      } 
     });

來源

2014-03-01 Visiophobia

也許嘗試：

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

和其他維度，div.logo適合你的目標。

來源

2014-03-01 10:48:02 alquist42

使用jquery調整div大小會導致子圖像丟失寬高比

回答

相關問題