在 Div 容器内具有全宽的响应式背景图像答案

【问题标题】：Responsive Background Image w/ Full Width Inside Div Container在 Div 容器内具有全宽的响应式背景图像
【发布时间】：2014-10-30 01:35:43
【问题描述】：

我想在页面一半左右的容器内创建一个背景图像。高度可能是屏幕高度的 20%-30%。我是否需要创建多个图像并使用 CSS Media question 来显示一个图像并隐藏每个分辨率范围的所有其他图像？或者，有没有更简单的方法可以自动缩放图像。如果图像是矢量格式有帮助吗？

【问题讨论】：

能否分享一下当前的代码。
这是一个 jsfiddle，它显示了一些非常接近我想要的东西。 jsfiddle.net/natetg/75x0hvf1我只希望图像显示在屏幕的一半而不是顶部。

【解决方案1】：

如果你希望图像始终覆盖 div，可以使用 CSS3 的新 background-size 值：

background-size: cover | contain;

使用封面，无论大小，图像始终填满整个容器，浏览器会调整图像，图像可能会被裁剪。

整个图像将始终可见，即如果容器比图像小，图像会缩小以适应容器，这样，在容器中看到空白是正常的。

【讨论】：