反应高度

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

尝试使用height:5vh或将您标记在另一个名为mydiv（或其他名称）和mydiv的div中：height: 5vh

Answer 2

正如CBroe已经提到的评论，为了使用基于百分比的高度，您的父元素也需要具有基于百分比的高度。要实现这一点，您基本上必须从根元素开始并遍历树。可能的解决方案可能如此。

html, body {
  height: 100%;
}

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

Demo

Answer 3

尝试将背景图像的高度设为：

height:100vh;

然后它将缩放到任何设备的视口高度。