jumbotron和内容之间的边距在缩小窗口时增加

Question

我很接近最终让我的jumbotron图像缩小以适应视口时调整较小的尺寸，但现在当我这样做时增加了底部边距，使得它变小。轻松修复？

http://codepen.io/chiggory/pen/qNGQGO

HTML

<div class="jumbotron"> 
    <div class="container"> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Over 27,000,000</h1> 
      <h4>is the current estimate of slaves worldwide. More than at any point in human history. Every 30 seconds, another person falls victim to the human trafficking industry. Often these slaves are kidnapped or sold by families under desperate circumstances. As the demand to exploit men, women and children for manual and sexual labor increases, the average age of victims continues to fall.</h4> 
      <h2>We believe</h2> 
      <h4>these statistics are unacceptable. These are not mere numbers, they represent lost and stolen human lives, lives which we are relentlessly fighting for. Together we are investing our lives, devoting our unique skills and resources to bring justice and freedom to those that desperately need it, both locally, here in Buena Vista, CO, and globally. </h4> 
      <br> 
      <h4>Get involved and be their voice!</h4> 
     </div> 
    </div> 
</div> 

CSS

.jumbotron { 
    background-image:url('http://4.bp.blogspot.com/-CIy9X0Vwlko/VFvyStJbP_I/AAAAAAAACys/Ze7QVlcVmX0/s1600/HOPE%2BLogo%2Bcopy.jpg'); 
    height: 600px; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-color: #FFFFFF; 
    position: relative; 
} 
.jumbotron .container { 
    position: relative; 
    top:100px; 
} 
.jumbotron h1 { 
     color: #fff; 
     font-size: 60px; 
     font-family: 'Love Ya Like A Sister', cursive; 
     font-weight: bold; 
} 
.jumbotron p { 
    font-size: 30px; 
    color: #A80000; 
} 

Answer 1

我已经搞砸了你的代码很多。 height: 600px为.jumbotron正在抛弃它。这是我认为你正在寻找的东西...让我知道。

@media screen and (max-width: 900px) { 
 
    body .jumbotron { 
 
    background-size: 900px; 
 
    background-position: left -50px center; 
 
    } 
 
} 
 
.jumbotron { 
 
    padding: 0; 
 
    height: 90vmin; /* Here you can change the height */ 
 
    width: 100%; 
 
    background-image:url('http://4.bp.blogspot.com/-CIy9X0Vwlko/VFvyStJbP_I/AAAAAAAACys/Ze7QVlcVmX0/s1600/HOPE%2BLogo%2Bcopy.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-color: #efeeec; 
 
    background-position: left center; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.jumbotron h1 { 
 
     color: #fff; 
 
     font-size: 60px; 
 
     font-family: 'Love Ya Like A Sister', cursive; 
 
     font-weight: bold; 
 
} 
 
.jumbotron p { 
 
    font-size: 30px; 
 
    color: #A80000; 
 
}

<div class="jumbotron"> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h1>Over 27,000,000</h1> 
 
      <h4>is the current estimate of slaves worldwide. More than at any point in human history. Every 30 seconds, another person falls victim to the human trafficking industry. Often these slaves are kidnapped or sold by families under desperate circumstances. As the demand to exploit men, women and children for manual and sexual labor increases, the average age of victims continues to fall.</h4> 
 
      <h2>We believe</h2> 
 
      <h4>these statistics are unacceptable. These are not mere numbers, they represent lost and stolen human lives, lives which we are relentlessly fighting for. Together we are investing our lives, devoting our unique skills and resources to bring justice and freedom to those that desperately need it, both locally, here in Buena Vista, CO, and globally. </h4> 
 
      <br> 
 
      <h4>Get involved and be their voice!</h4> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

看起来我可以使用background size: 100% 100%从另一个答案。它倾斜的形象超过contain，但我可以忍受它。