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