具有最小高度的英雄圖像：100vh 太大

Question

我在英雄圖像上使用 min-height: 100vh，但我注意到在 lg-xl 屏幕上圖像變得非常大。 有沒有辦法在不影響圖像內的疊加層的情況下糾正此問題或限制英雄圖像的高度。 請注意圖像頂部有一個疊加層，因此使用高度 100vh 不起作用我的代碼如下：

<div className="bg-img"></div>

.bg-img {
min-height: 100vh;
background-image: url('https://storage.googleapis.com/youfit-assets/nologo.png');
background-size: cover;
}

Answer 1

嘗試做height: 100vh; 而不是min-height: 100vh; . 也許這就是困擾你的原因。

然后我測試了它，發現屬性className無效，應該是class 。

Answer 2

嘗試這個

*{
  margin: 0px;
  padding: 0px;
  
 }
 body{
 min-height: 100vh;
 }
.bg-img{
 height: 100vh;
}

這可能適用於您的情況