Bootstrap：覆蓋全寬圖像的標題

Question

我在導航欄下有一個完整的頁面寬度圖像，然後標題標題放在它上面。

事情是我似乎無法弄清楚，無論頁面的大小如何總是讓它死。在頁面完全打開的時候，標題處於中間位置，但是在調整文本大小時，文本會下降。

任何想法？

<div class="row"> 
    <div id="header-image"> 
     <img src="images/header2.jpg" alt="header" class="img-responsive"> 


     <div class="row"> 

      <div class="col"> 
       <h2 class="text-center">About Us</h2> 
      </div> 

     </div> 


    </div><!-- end header image --> 
</div><!-- end row --> 


#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; } 
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; } 
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; } 

Answer 1

根據屏幕尺寸使用媒體查詢可以讓您根據屏幕分辨率使用不同的CSS。你滾動屏幕越小，它就會相應地改變它的CSS。

媒體查詢教程：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

的代碼作爲屏幕低於像素要求（500像素和200像素）下面將改變字體大小和填充。填充被丟棄以保持在圖像下方，並且字體大小也被降低。

溶液1

JS小提琴：https://jsfiddle.net/Lq2zj48j/7/

#header-image { 
    width: 100%; 
    height: auto; 
    margin-top: 50px; 
    position: relative; 
    min-height: 200px; 
} 

#header-image h2 { 
    color: white; 
    font-size: 5em; 
    font-family: 'cmlight'; 
    position: relative; 
    padding-top: 10%; 
} 

#header-image .col { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

@media only screen and (max-width: 500px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
} 

@media only screen and (max-width: 200px) { 
    #header-image h2 { 
     font-size: 2em; 
     padding-top: 1%; 
    } 
} 

---

溶液2

這種解決方案具有 「擠壓」 的圖像的機會。爲了避免這種情況，你可以在CSS中設置圖像（你的＃標題圖像上的背景圖像的一部分）。從那裏你可以將它設置爲不重複，居中，然後使用媒體查詢來保存調整大小時圖像的寬高比和「縮放」。

background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg'); 
    background-size: 1200px 652px; /* The dimentions of your image */ 
    background-position: center; 
    background-repeat: no-repeat; 

的js小提琴：https://jsfiddle.net/Lq2zj48j/8/

#header-image { 
    width: 100%; 
    height: 400px; 
    margin-top: 50px; 
    position: relative; 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg'); 
    background-size: 1200px 652px; /* The dimentions of your image */ 
    background-position: center; 
    background-repeat: no-repeat; 
} 

#header-image h2 { 
    color: white; 
    font-size: 5em; 
    font-family: 'cmlight'; 
    position: relative; 
    padding-top: 10%; 
} 

#header-image .col { 
    position: relative;; 
    width: 100%; 
} 

@media only screen and (max-width: 700px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
    #header-image { 
     height: 300px; 
    } 
} 

@media only screen and (max-width: 500px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
    #header-image { 
     height: 200px; 
    } 
} 

@media only screen and (max-width: 200px) { 
    #header-image h2 { 
     font-size: 2em; 
     padding-top: 1%; 
    } 
    #header-image { 
     height: 175px; 
    } 
}