我正在为一个网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下：
<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>
我需要的是图像覆盖屏幕的整个宽度（即使屏幕比图像宽，在这种情况下图像应该拉伸）并且 div 的高度相应地缩放，以便图像完全显示。我怎样才能做到这一点？我尝试了每一个属性background-size但没用...
编辑：当前的问题是高度缩放到文本之一
对于你的问题我有更好的解决方案。
问题是因为您没有给出 HTML、BODY 的高度。
如果你给出了高度，这个问题就可以解决，不需要添加位置元素，将来会出现一些对齐问题
SOLUTION
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
