引導「頁眉/超大屏幕」

Question

我使用下面的代碼創建一個網頁的標題「標誌」：

<header> 
    <div class="jumbotron"> 
     <!-- insert logo here --> 
    </div> 
</header> 

什麼通常是最好的方法/分辨率，使圖像中，使其始終適合整個超大型手機，但縮小到手機/平板電腦尺寸時不會過度扭曲？另外，一旦我製作了圖像，並在我有「在這裏插入標誌」src它有CSS我可以用來幫助解決這個問題？

Answer 1

如果你只是想使圖像佔據整個jumbotron，那麼你可以申請一個類你<img>，像.image和使用CSS樣式它像這樣：

.image { 
    width: 100%; 
    height: auto; 
} 

你仍然會看到從jumbotron類輕微的背景，所以我會建議增加此：

.jumbotron { 
    padding:0; 
} 

至於響應速度，讓您知道任何未來的需求，你可以使用@media爲不同的屏幕尺寸操縱某些類別或標籤。例如：

@media all and (max-width: 500px) { 

    .image { 
     width: 75%; 
    } 
} 

這意味着所有.image類的寬度將是任何屏幕尺寸小於或等於500px 75％。