100vh沒有使圖像100％的視口

Question

我正在嘗試使用100vh使background-image總是有一個高度，每個屏幕的大小。我想要做的是爲每個視口使用相同的圖像，並允許overflow: hidden由於訪問寬度。本質上，更垂直地縮小圖像。但是，我的嘗試不起作用。 background-image未調整到100vh。

有沒有人看到我做錯了什麼？

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

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

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

你＃家庭cover1 背景大小缺乏高度的100％，改變background-size: 100%;到background-size: 100% 100%;