如何在較大的顯示器上縮放jumbotron引導程序？

我目前有一個網站，使用從Codecademy的「如何製作網站」教程引導的jumbotron功能。如何在較大的顯示器上縮放jumbotron引導程序？

在這裏面，它使用以下HTML：

<div class="jumbotron"> 
     <div class="container"> 
      <h1>Heading</h1> 
      <p>Tagline</p> 
      <a href="#About"><button type="button" class="btn btn-lg btn-danger">Learn More</button></a> 
      <!--<a href="#">Learn More</a>--> 
     </div> 
    </div>

和下面的CSS：

.jumbotron { 
    background-image:url("flight.jpg"); 
    height: 500px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    margin-bottom:0px; 
} 

.jumbotron .container { 
    position: relative; 
    top:100px; 
} 

.jumbotron h1 { 
    color: #CC0000; 
    font-size: 48px; 
    font-family: 'Shift', sans-serif; 
    text-shadow:none; 
} 

.jumbotron p { 
    font-size: 20px; 
    color: #CC0000; 
    text-shadow:none; 
}

背景圖像不結垢正確當使用更大的顯示器，並且將圖像的增加在div內的大小，但div保持相同的大小。結果看起來像放大圖像而不是圖像保持整體。

任何想法如何使它在較大的顯示器上正確縮放？

來源

2014-12-01 hasanzuav

更改爲

哦，我apologive誤解了你的問題，你需要編輯CSS爲.jumbotron需求是蓋和位置中心。

.jumbotron { background-size: cover; background-position: center; }

在Jumbotron周圍添加Container Div！

來源

2014-12-01 23:49:18 Rafael

我刪除了容器股利和問題仍然存在。我認爲它與被圖像寬度大於圖像寬度的圖像相關。我仍然不確定如何解決它。我把一個例子放在www.galacticchef.com – hasanzuav 2014-12-02 00:13:32

試試這個......還有**添加容器** ......你需要將內容集中在jumbotron中。 – Rafael 2014-12-02 00:17:52

此外，該網站看起來非常酷，我喜歡你的顏色組合。 – Rafael 2014-12-02 00:25:08

更新2： This is helpful link.我認爲，你在jQuery的解決方案。

更新：這裏是解決方案。

background: url("flight.jpg") no-repeat center center; 
height: 500px; 
background-repeat: no-repeat; 
background-size: 100%; 
margin-bottom: 0px; 
}

您可以使用@media這樣的查詢：

@media (max-width: 768px) { 
     .btn-responsive { 
     padding:2px 4px; 
     font-size:11px; 
     line-height: 1; 
     border-radius:3px; 
     } 
    } 

    @media (min-width: 769px) and (max-width: 992px) { 
     .btn-responsive { 
     padding:4px 9px; 
     font-size:12px; 
     line-height: 1.2; 
     } 
    }

隨着@media查詢，你可以寫不同媒體類型不同的CSS代碼。

這有助於當你想爲不同的媒體類型諸如屏幕或打印機不同的佈局，而且當你想要不同的佈局爲不同的設備，以響應式設計製作網頁時，這是非常有用的。

當用戶將窗口向上或向下調整到特定寬度或高度時，您也可以有不同的佈局。

More info.

來源

2014-12-01 23:50:30 Karmacoma

我認爲問題發生在jumbotron div的寬度比我使用的圖像的寬度更長時。但是，由於jumbotron div的高度是固定的，它會以不同的div速率增加圖像的大小。 www.galacticchef.com上有一個例子。有沒有辦法使div 500px的高度增加，當寬度大於圖像大小時增加？ – hasanzuav 2014-12-02 00:15:44

嗨Karmacome，感謝您的幫助。我試過更新的解決方案，因爲當瀏覽器的寬度小於圖像的寬度時，它使用的是background-size：100％，圖像會縮放，因此jumbotron div和下面的文本之間會有白色的死區（未顯示）。有沒有辦法使默認div高度500px，如果div寬度高於圖像大小，div高度會增加以匹配比例圖像高度？ – hasanzuav 2014-12-02 00:37:08

如何在較大的顯示器上縮放jumbotron引導程序？

回答

相關問題