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>

我需要的是图像覆盖屏幕的整个宽度（即使屏幕宽于图像，在这种情况下图像应该拉伸），并且div的高度也相应地缩放，因此图像是完全显示。我怎样才能做到这一点？我尝试了background-size的每个属性，但它没有用......

编辑：当前的问题是高度与文本

之一成比例

Answer 1

尝试以下解决方案：

＆＃13;

body, html {
  margin:0;
  padding:0;
}
.banner_div {
  background-image: url(http://placehold.it/100x100);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position: center;
}

＆＃13;

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

＆＃13;

Answer 2

我为您的问题提供了更好的解决方案。

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

<强>解

HTML

YUI()

CSS

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

    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;
    }

Answer 3

首先使用16：9图像以获得更好的效果：

然后使用img标记本身

在不考虑宽高比的情况下缩放图像可能不适合横幅广告，因此我们使用width:100%和height:auto来保留横幅比率。大多数屏幕使用16：9的比例，所以如果你有一个16：9的图像

应该是好的

＆＃13;

body,
html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

.banner{
  display:block;
  }

.banner img {
  width: 100%;
  height: auto;
  position: relative;
}
.banner p {
  float:left;
  position:absolute;
  top:0px;
}

＆＃13;

<div class="banner">

  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" />
  <p>Some text here</p>
</div>

Some random text to show other elements wont overlap the banner

＆＃13;

Answer 4

此css代码与我合作：

background-size: 100% 100%;

背景图像全宽和高度

4 个答案: