jumbotron和內容之間的邊距在縮小窗口時增加

我很接近最終讓我的jumbotron圖像縮小以適應視口時調整較小的尺寸，但現在當我這樣做時增加了底部邊距，使得它變小。輕鬆修復？jumbotron和內容之間的邊距在縮小窗口時增加

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

來源

2016-08-23 Erich Sterzing

我已經搞砸了你的代碼很多。 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>

來源

2016-08-23 18:24:41

非常感謝您願意花時間。我想我們會被釘死在十字架上！重要的是讓我攪亂它。我需要查看@media所做的更新 –

以便您不必使用！重要。 '@ media'我使用過這種方式，以便圖像在達到某個屏幕寬度時不會改變圖像大小。我這樣做是因爲如果屏幕太小，圖像變得非常小。 –

看起來我可以使用background size: 100% 100%從另一個答案。它傾斜的形象超過contain，但我可以忍受它。

來源

2016-08-23 17:38:28

jumbotron和內容之間的邊距在縮小窗口時增加

回答

相關問題