作为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

- Evanss

Answer 1

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

更多关于 background-size:cover 的信息，请参考 MDN

cover

该关键字指定背景图片应缩小至最小，同时确保其两个维度大于或等于相应的背景定位区域的维度。

注：如下面 Terry 的评论所述，您可能还想添加 background-position: center center; 以确保图像居中显示。

- SW4

---

还有一个有用的技巧：使用 background-position: center center; 来确保在使用 cover 缩放图片以适应容器后，图片在元素中居中 :) - Terry

我已更新我的问题，解释为什么background-size并不能完全解决我的问题。 - Evanss

@jdln - 所以你想让 div 根据图像的宽高比例自动调整大小？恐怕你需要使用 img 元素来实现，因为仅使用 div 是不可能做到的，除非你还要添加额外的 JS 代码。div 和 img 是两个根本不同的元素。 - SW4

Answer 2

background-size: cover; 会裁剪图片，以确保整个 div 被图片覆盖。如果你想避免裁剪，可以使用 background-size: contain;。

这两种方式的行为类似，但是使用 contain 会强制背景图片缩放，以确保其尺寸比背景定位区域的相应尺寸更小或相等。

- MarioDS

---

我已经更新了我的问题，解释了为什么background-size cover或contain并不能完全解决我的问题。 - Evanss

那个解决方案对我来说非常完美，使用contain比cover更好的想法，因为cover在某一点上失败并裁剪图像，但是使用contain，图像现在就像bootstrap3的img-responsive标签一样具有响应性。 - Akshay Shrivastav

Answer 3

背景大小：

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

- Canser Yanbakan

---

我更新了我的问题，解释了为什么背景大小覆盖并不能完全解决我的问题。 - Evanss