0
我有一個標題,當用戶通過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");
}
}
});
}
爲什麼圖像質量出現如此明顯的變化,以及如何避免這種情況?
最好的方法是使用Photoshop(例如!)調整圖像大小,並將調整大小的圖像加載到'.smaller'類中。您遇到質量問題是因爲導航器實時調整圖像大小,並且不遵守原始比例。 –
你應該用SVG替換你的'logo.png'文件。 – w3debugger
@VincentDecaux還有影響調整大小的轉換 - 如果我換出圖像大小,轉換將不再起作用,因爲圖像將立即被其較小的同胞替換。 – Ben