響應式圖像背景質量問題

我有一個標題，當用戶通過JavaScript滾動某個點時會更改大小。響應式圖像背景質量問題

當用戶滾動超過50px時，類.smaller被添加到標題，該標題影響子元素，包括徽標。

但是，當徽標DIV元素調整大小時，圖像的質量似乎會改變;邊緣看起來更加鋸齒和尖銳。

這是正常的樣子：

而且滾動：

這裏是CSS：

div#header div.logo { 
    width: 400px; 
    height: 90px; 
    margin: 5px; 
    background: url(../img/logo.png) no-repeat center center; 
    background-size:contain; 
    float:left; 
    padding:0 !important; 
    -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     -ms-transition: all 0.3s; 
     -o-transition: all 0.3s; 
      transition: all 0.3s; 
} 

div#header.smaller div.logo { 
    width:262px; 
    height:40px; 
    -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     -ms-transition: all 0.3s; 
     -o-transition: all 0.3s; 
      transition: all 0.3s; 
}

相關的JavaScript：

window.onload = init(); 

function init() { 
    //header resize on scroll 
    window.addEventListener('scroll', function(e){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 50, 
      header = document.querySelector("#header"); 
     if (distanceY > shrinkOn) { 
      classie.add(header,"smaller"); 
     } else { 
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
    }); 
}

爲什麼圖像質量出現如此明顯的變化，以及如何避免這種情況？

來源

2015-07-28 Ben

最好的方法是使用Photoshop（例如！）調整圖像大小，並將調整大小的圖像加載到'.smaller'類中。您遇到質量問題是因爲導航器實時調整圖像大小，並且不遵守原始比例。 –

你應該用SVG替換你的'logo.png'文件。 – w3debugger

@VincentDecaux還有影響調整大小的轉換 - 如果我換出圖像大小，轉換將不再起作用，因爲圖像將立即被其較小的同胞替換。 – Ben

導航器在飛行中調整圖像大小時，圖像變得模糊。 SVG圖像不會模糊您的標誌。
例如virtuehost.net/clients/go2markets檢查這個網站，並嘗試調整這個標誌。

來源

2015-07-28 10:07:41 w3debugger

響應式圖像背景質量問題

回答

相關問題