html - 背景图像的全宽和全高

Question

我正在为一个网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下:

<div class="banner_div">
<style>
    .banner_div{
        background-image: url(/images/banner.jpg);
        width: 100%;
        height: 100%;
        background-size: contain;
    }
</style>
<p class="banner_text">Line 1</br>Line 2</p>
</div>

我需要的是图像覆盖屏幕的整个宽度(即使屏幕比图像宽，在这种情况下图像应该拉伸(stretch))并且 div 的高度相应地缩放，以便图像是完全显示出来。我怎样才能做到这一点？我尝试了 background-size 的每个属性，但它不起作用......

编辑:当前的问题是文本的高度缩放

Answer 1

我对您的问题有更好的解决方案。

问题是因为您没有给出 HTML、BODY 的高度。如果你给出了高度，这个问题就可以解决，不需要添加位置元素，将来会出现一些对齐问题

解决方案

HTML

<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>

CSS

    html,body{
      height:100%;
      margin:0;
      padding:0;
    }
    .banner_div{
        background-image: url(http://placehold.it/100x100);
        background-size: cover;
         background-position: center;
        width:100%;
        height:100%;
    }
    .banner_text{
      margin:0;
      padding:20px;
    }

<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>