引导框架

Question

我有一段带有bootstrap的代码：

<style>
#restaurants {
overflow: hidden;
}

#restaurantsbg {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 100%;
}
</style>

<section id="restaurants">
    <div class="container">
        <div class="row">
            <div id="restaurantstxt" class="col-md-6"></div>
            <div id="restaurantsbg" class="col-md-6"></div>
        </div>
    </div>
</section>

基本上我想做的是根据#restaurants身高在#restaurantsbg中创建一个背景图片。

上面的代码不起作用，知道我该怎么办？

问候！

Answer 1

我认为你需要这样的东西，请点击整页查看：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  #restaurants {
    border: 1px  solid #000;
    height: 200px;
  }

  #restaurantsbg{
    background-image: url('http://bligoo.com/media/users/0/32886/images/Advertencia.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    height: auto;
    min-height: 100%;
    max-height: 100%;
    border: 1px  solid #000;
  }
  </style>
<div class="container">
  <div class="row">
    <section id="restaurants">
      <div id="restaurantstxt" class="col-md-6"></div>
      <div id="restaurantsbg" class="col-md-6"></div>
    </section>
  </div>
</div>