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

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：contain 更改为 background-size：cover 。

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

背景大小包含： 尽可能缩放图像，而不裁剪或拉伸图像。

背景尺寸封面： 在不拉伸图像的情况下尽可能缩放图像。如果图像的比例与元素不同，则可以垂直或水平裁剪图像，以确保没有空白空间。