css - 响应高度

Question

这是我的代码:

#bener{
        background:url(../img/main.png) no-repeat;
    	background-size:120%;
    }
    
    .bener_content{
        color:#fff;
    	text-align:center;
    	margin-top: 30%;
    }	
    .bener_overlay{
    	background: rgba(75, 78, 78, 0.7);
        height: 120%; //This line
    }	
    .bener_content h2{
        color:#ffff;
    }	
    .bener_content p{
        color:#ffff;	
    }

    
<section id="bener" class="">
   <div class="bener_overlay">
      <div class="container">
        <div class="bener_content">
           <p class="textmiddle">TEXT</p>
		   <h3>Text</h3>
        </div>
       </div>
    </div>
</section>

我遇到的问题是，每当我以不同的分辨率尝试我的网站时，我的主页图像无法缩放，宽度没问题，但高度始终相同。在 .benner_overlay 中，我使用了百分比高度，但由于某些原因它什么都不做，当我使用像素时，它没有响应。 我该如何解决这个问题，以便无论我在哪里尝试我的网站，主页图像都会覆盖整个屏幕？

Answer 1

正如 CBroe 在评论中提到的那样，为了使用基于百分比的高度，您的父元素也需要具有基于百分比的高度。为此，您基本上必须从根元素开始并遍历树。可能的解决方案如下所示。

html, body {
  height: 100%;
}

#bener {
  background: url(../img/main.png) no-repeat;
  background-size: 120%;
  height: 100%;
}

Demo