html - 100vh 没有使图像成为视口(viewport)的 100%

Question

我正在尝试使用 100vh 使 background-image 始终具有与屏幕尺寸对应的高度。我想要做的是为每个视口(viewport)使用相同的图像，并允许 overflow: hidden 由于访问宽度而产生。本质上，更垂直地缩小图像。但是，我的尝试没有奏效。 background-image 没有调整到 100vh。

有没有人看到我做错了什么？

#home-cover1 {
	background-image: url("/images/home-cover1.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    width: 100%;
	position: relative;
}
#home-cover1-wrap {
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

<div id="home-cover1">
  <div id="home-cover1-wrap">
  </div>
</div>

Answer 1

更改 CSS 我认为 background-size: cover;是最好的

#home-cover1 {
    background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;
}