随着浏览器窗口的增加，随时保持横幅响应

Question

我试图让我的横幅平滑扩展，因为我将浏览器的窗口大小增加到右边。

有一次，我看到了黑色的差距。

在Note 8和Pixel XL上显示出这个黑色差距。

这是我现在在页面上获得的CSS

.respheader{
    background-image: url({{asset('uploads/client/'.$data->Header->site_banner) }});
    background-size:cover;
}


@media only screen and  (min-width: 1024px) {

    .respheader{
        background-image: url({{asset('uploads/client/'.$data->Header->site_banner) }});
        background-size:cover;
    }

}

你可以从这里看到更多的CSS

http://dips.awsri.com/

问题就在于此。

如何进行并进一步调试？

Answer 1

我会更改background-size：包含到background-size：覆盖媒体查询。

对于https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-size contains：尽可能缩放图像，而不裁剪或拉伸图像。

背景大小封面：在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。