响应英雄形象作为CSS背景图像？

Question

对于我的响应式网站，我希望将英雄图像作为背景图像而不是html中的图像。

我可以轻松地将div设为100％宽度，但我不确定如何使其具有正确的高度。我必须在px中设置一个高度，但所需的高度取决于div的宽度，该宽度因站点响应而变化。

<div class="cont">
  <p>Below is an image in the html that scales correctly</p> 
  <img src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" />
  <p>The example below is a background image in CSS</p>
  <div class="hero-img"></div>
  <p>Some text</p>
</div>

.cont {
  width: 20%;
  margin: auto
}
img {
  max-width: 100%;
}

.hero-img {
  background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") no-repeat;
  background-size: 100% 100%;
  height: 200px;
}

http://codepen.io/anon/pen/FBxkz

更新 - 背景大小封面或包含不解决我的问题。带图像的div仍然具有固定的高度。

http://codepen.io/anon/pen/FCafi

Answer 1

将background-size: 100% 100%;更改为background-size: cover;

More on background-size:cover from MDN

  

封面

     

此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸   大于或等于相应的尺寸   背景定位区。

NB。根据下面Terry的评论，您可能还想添加background-position: center center;以确保图片保持居中。

Answer 2

background-size: cover;会裁剪图像以确保整个div都被它覆盖。如果您想阻止裁剪，可以使用background-size: contain;。

行为类似，但使用contain强制缩放背景图像以确保其尺寸小于 <或>等于背景定位区域的相应尺寸。< / p>

Answer 3

背景尺寸：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;