响应式图像背景质量问题

Question

当用户通过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");
            }
        }
    });
}

为什么图像质量会出现如此明显的变化，如何避免这种变化？

Answer 1

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