css - 响应高度

扫码查看

这是我的代码:



#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中,我使用了以百分比表示的高度,但是由于某些原因,它什么也不做,当我使用像素时,它没有响应。
我该如何解决这个问题,以便无论我在哪里浏览我的网站,首页图像都可以覆盖整个屏幕?

最佳答案

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

html, body {
  height: 100%;
}

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


Demo

关于css - 响应高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45413527/

10-11 23:25
查看更多