带有Div容器内部全宽的响应式背景图像

Question

我想在容器中创建一个背景图像，该容器位于页面的大约一半位置。 高度可能是屏幕高度的20％-30％。 我是否需要创建多个图像，并使用CSS Media问题显示一个图像并隐藏每个分辨率范围内的所有其他图像？ 或者，是否有更简单的方法来自动缩放图像。 图像为矢量格式是否有帮助？

Answer 1

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

background-size: cover | contain;

覆盖

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

包含

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