Question

当我尝试使用img背景响应来制作div时，我遇到了一个小问题。

div无法获得图像大小：540px-290px
当我调整浏览器大小时，2 div不会一起调整大小。

在每个div中我有一个背景图像，我希望div能够响应但是两个div都没有达到完整的大小，我使用％来表示响应。如果我使用像素将无法做出响应。

这是一个图像怎么应该是我的div。 http://imgur.com/V9OROUD

我正在使用bootstrap框架

HTML

  <div class="row index-banner">

    <div class="col-xs-6">
      <div class="latest-mobile">
        <h1> releases?</h1>    
        <p>We got you </p>
        <p>Find out more ></p>
        </div>
    </div>

    <div class="col-xs-6">
       <div class="sponge-bob">
        <h1>We have just ....</h1>
        <p>Let your kids enjoy .</p>
        <p>Find out more ></p>
        </div>
    </div>

  </div>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

.col-xs-6 .sponge-bob {
  background: url(../../public/images/content/sponge-bob.jpg) no-repeat;
  margin-left: 5%;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  display: table;
  position: relative;
}

.col-xs-6 .latest-mobile {
  background: url(../../public/images/content/latest-mobile.jpg) no-repeat center center scroll;
  margin-left: 7%;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  display: table;
  position: relative;
}

Answer 1

很可能你需要定义最小高度设置min-height: 100%;

Answer 2

这可能会解决您的问题

.latest-mobile,
.sponge-bob {
  min-height: 290px;
}

响应div和身高％不起作用

2 个答案: