响应式英雄图像作为 CSS 背景图像？答案

【问题标题】：Responsive hero image as CSS background image?响应式英雄图像作为 CSS 背景图像？
【发布时间】：2014-05-09 14:49:05
【问题描述】：

对于我的响应式网站，我希望将英雄图像作为背景图像，而不是 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

【问题讨论】：

标签： css

【解决方案1】：

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

More on background-size:cover from MDN

封面

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

注意。根据下面Terry 的评论，您可能还需要添加background-position: center center; 以确保图像保持居中。

【讨论】：

也有用：background-position: center center; 确保图像在使用cover 缩放以适应容器后，在元素中居中:)
我更新了我的问题以解释为什么 background-size 不能完全解决我的问题。
@jdln - 所以你想让div 增长/缩小以保持图像纵横比？恐怕您需要为此使用img，如果不额外增加JS开销，就不可能使用div，div和img是两个根本不同的元素。

【解决方案2】：

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

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

【讨论】：

我更新了我的问题以解释为什么背景大小的封面或包含不能完全解决我的问题。
该解决方案对我来说非常有效，与封面相比，使用包含是一个好主意，封面在某一点失败并且正在裁剪图像，但使用包含图像现在就像img-responsive 一样响应bootstrap3的标签

【解决方案3】：

背景大小：

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

【讨论】：

我更新了我的问题来解释为什么背景尺寸的封面不能完全解决我的问题。