Css 响应背景图像在调整大小时留下空白

我已经创建了一个使用背景图像的响应div，唯一的问题是当我调整浏览器窗口的大小时，图像会在其下方留下一个空白

HTML

CSS

你好

目前我已经没有选择了，我尝试了很多不同的“解决方案”，但都没有成功。我可以使用媒体查询创建多个不同分辨率的图像，但我宁愿保持简单

---

非常感谢

使用

封面

作为

背景尺寸

而不是

包含

background-size: cover;

html，正文{
身高：100%；
宽度：100%；
}
#容器{
身高：100%；
宽度：100%；
}
#背景图像{
背景图像：url（'http://tiny.cc/pm334x');
高度：320px；
宽度：100%；
显示：块；
背景尺寸：封面；
背景重复：无重复；
}

你好

看起来您需要：

background-size: cover;

而不是：

background-size: contain;

我已经更新了小提琴

您是否尝试过：

#background-image {
  background-image:url('http://tiny.cc/pm334x');
  height: 320px;
  width: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

---

只需使用下面的代码

#背景图像

id即可

background-position:center;
background-size:cover;

---

你试过使用背景尺寸：封面吗？我试过了，因为某种原因，它不能与我正在使用的实际图像（分辨率为1920 x 320）一起工作。我已经用我正在使用的实际图像更新了小提琴，因为某种原因，它没有像以前的图像那样调整大小。究竟是什么问题？在我看来，它好像在掩盖这个部门。

#background-image {
  background-image:url('http://tiny.cc/pm334x');
  height: 320px;
  width: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

background-position:center;
background-size:cover;