全宽度背景图片高度受限。

Question

我想要一个全屏的背景图片，但只是宽度而非高度，就像这里一样

我已经尝试了background-size:cover;但是那会覆盖整个页面 - 我只想要覆盖特定的高度。

- user1912899

Answer 1

我找到了我需要的内容：

CSS：

#header-wrapper{
   top: 0;
   left: 0;
   height: auto;
   position: absolute;
   width: 100%;
}

HTML:

<div id="header-wrapper">
    <img src="image.jpg" width="100%" style="border-bottom:1px solid black;">
</div>

感谢您的所有帮助！

- user1912899

---

更好的做法是，只需要这样就可以了：<img src="image.jpg" style="position: absolute; top:0; left:0; width:100%;"> - user1912899

Answer 2

如何使用background-size: 100% 80%（例如）。

您可以更改第二个值，即高度。

这是一个演示。

- Barnee

Answer 3

您提到的网站只是在一个具有固定 height 和 width: 100% 的 div 上使用标准的背景图片。

例如，您提到的网站使用：

header {
   height: 460px;
   margin-top: -69px;
   overflow: hidden;
   padding: 0px;
   width: 100%;
}

请注意代码块中的高度，background-image: cover 的意思是将背景图像缩放以适应空间。

- Joel Davey

---

谢谢，但当我尝试那样做时，图片 1. 没有覆盖屏幕的宽度，2. 在左侧留下了一个白色的条纹... - user1912899