부트 스트랩 : 오버레이 A 전체 너비 이미지 위로 넘김

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