javascript - 响应图像背景质量问题

Question

我有一个标题，它会在用户通过 JavaScript 滚动经过某个点时改变大小。

当用户滚动超过 50px 时，类 .smaller 会添加到标题中，这会影响子元素，包括 Logo 。

但是，当调整 Logo 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");
            }
        }
    });
}

为什么图像质量会发生如此明显的变化，如何避免这种情况？

Answer 1

当导航器动态调整图像大小时，图像变得模糊。 SVG 图像不会模糊您的 Logo 。
例如virtuehost.net/clients/go2markets 检查此站点并尝试调整此 Logo 的大小。