全宽背景图像有限高度

Question

我想获得一个全屏背景图片，但只有宽度，而不是高度，如here

我一直在玩background-size:cover;，但这涵盖了整个页面 - 我只想要覆盖一定的高度。

Answer 1

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

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

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

注意代码块中的高度background-image: cover只是意味着缩放背景图像以适应空间。

Answer 2

所以我找到了我要找的东西：

的 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>

感谢您的帮助！

Answer 3

background-size: 100% 80%（例如）如何 您可以更改第二个值，即高度。

这是fiddle。