Question

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

有人看到我做错了吗？

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 1

更改CSS我认为背景大小：封面;是最好的

#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;
}

Answer 2

您的＃home-cover1 背景大小缺少100％的高度，将background-size: 100%;更改为background-size: 100% 100%;

100vh不使图像100％的视口

2 个答案: