当您缩小浏览器时，header 的背景图片不占满宽度

Question

我正在制作一个 header 组件，我想要实现的是让我的 header 图片伸展到网页的整个宽度，即使浏览器缩小了，但是当你缩小浏览器图片不会拉伸 100%，这让我发疯。我不想删除 scroll-x 属性，那么我该如何解决这个问题？我究竟做错了什么？这是我的问题的图片： https://imgur.com/YCZOYGE

这是我的代码的代码笔： https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/

Answer 1

所以，正如承诺的那样，我找到了解决方案。

将 display:flex 从 parent div 更改为 display: inline-block 并删除 width:100%。您 div 将拥有您的内容的大小，即使它溢出。

将宽度设置为 100% 将相对于 parent，它是正文。但是，主体不包括溢出。

我希望它有效:)

PS：如果你还需要display:flex，创建一个childdiv，带flex属性。

Answer 2

添加这个css

body{padding:0;margin:0}