随着浏览器 windows 增加，随时保持横幅响应

Question

我试图在向右增加浏览器 windows 大小的同时使我的横幅顺利展开。

有一次，我看到了黑色的缝隙。

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

背景大小包含：在不裁剪或拉伸图像的情况下尽可能大地缩放图像。

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

随着浏览器 windows 增加，随时保持横幅响应

Keep banner responsive at any time as browser windows increase

html

css

banner