background-size: cover 在两边留下填充，仅在一种情况下。 Chrome 错误？

Question

嘿，

运行遇到了一个奇怪的问题，在一堆模板化页面上，只有一个页面在英雄横幅的左侧显示了这条白色条子。横幅使用大小为封面的背景图片，位置为 center/center。如果我删除页面上的所有内容，除了英雄，它仍然显示。它仅在某些分辨率下显示。 Chrome inspector 没有显示任何异常，HTML+CSS 与其他页面相同，没有显示。有人对此有任何想法吗？

这是 CSS:

#top {
    background: url('/www/images/heros/features/features_768_1x.png') no-repeat center center;
    background-size: cover;

    @media only screen and (max-width: 375px) {
        background: url('/www/images/heros/features/features_375_1x.png') no-repeat center center;
        background-size: cover;
    }

    @media only screen and (min-width: 768px) and (max-width: 1366px) {
        background: url('/www/images/heros/features/features_768_1x.png') no-repeat center center;
        background-size: cover;
    }

    @media only screen and (min-width: 1366px) {
        background: url('/www/images/heros/features/features_1366_1x.png') no-repeat center center;
        background-size: cover;
    }
}

Fiddle: https://jsfiddle.net/fngbqyq1/

更新： -问题是图像中有白色/未正确裁剪（该死的设计师）eyeroll :p

Answer 1

尝试使用 background-size: 100% 100%;

或

background-size: 100vw 100vh;

或简单地

background-size: 100vw;

background-size: cover 在两边留下填充，仅在一种情况下。 Chrome 错误？

background-size: cover leaves padding on sides, only in one case. Chrome bug?

html

css

background-image

background-size