Responsive header image（Bootstrap 3/4）

Question

在發佈之前，我遇到了更多的問題，使我的標題響應。我想使瀏覽器正確縮放標題圖像（徽標），並在移動設備上正確顯示。

這樣的網頁並不時重新調整大小下來：http://timeandspace.org/

這裏是小提琴鏈接：www.jsfiddle.net/0m4z6u25/

如何讓導航欄做任何提示與上面鏈接的網站相同將是一個巨大的幫助！

感謝

Answer 1

首先更新bootstrap.css的版本，使用迄今最新的stable（v3.3.6）。

CDN鏈接

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css 

接下來，你需要做出很多改變你的導航欄的代碼。我已經做出了類似於您的要求的更改。這裏

<!--HEADER-->      
<div class="header"> 
    <div id="header-container" class="container"> 
    <div class="headerdiv"> 
     <a href="" class="headerleft"> 
     <img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU"> 
     </a> 
    </div>  
    </div> 
</div> 

    <nav class="navbar navbar-default" id="nav-main"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
      <img alt="Brand" width="20" height="20" src="img/nav_logo.jpg"> 
      </a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Help</a></li> 
      <li><a href="#">Events</a></li> 
      <li><a href="#">Forums</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Search</button> 
      </form> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

和CSS是

/* Stylesheet */ 

html, 
body { 

height:100%;  
} 

img { 
    max-width: 100%; 
} 


/* Salford SU Header */ 

.headerbox { 
    height: 200px; 
    width: 100%; 
    background-color:white; 
} 


#header-container{ 
    padding-left: 140px; 
    padding-right: 140px; 
} 



.headerdiv { 
    height: 200px; 
    width:100%; 
    padding-top: 0px; 
    padding-bottom: 17px; 
    padding-left: 65px; 
    padding-right: 65px; 
} 

.headerleft { 
    height: 146px; 
    min-width:400px; 
    width: 50%; 
    float: left; 
    padding-right: 15px; 
    background-position: center left; 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: block; 
} 

.header-right { 
    width: 40%; 
    height: 146px; 
    float: right; 
    border-left: 2px solid #c5c6c8; 
    padding-left: 15px; 
} 

.headerright1 
{ 
    height: 40px; 
    width: 100%; 
    text-align: justify; 
    vertical-align: bottom; 
    padding-top: 7px; 
} 

.headerright1 > a { 
    width: 34px; 
    display: inline-block; 
    vertical-align: bottom; 
    zoom: 1; 
} 


/* 
#cover { 
    background:#222 url('img/header.jpg') center center no-repeat; 
    background-size:cover; 
    color:white; 
    height: 24.5%; 
    text-align:center; 
    display:flex; 
    align-items:bottom; 
} 
*/ 


/*NAVIGATION CSS*/ 
#nav-main { 
    background: #ed1e24; 
} 

#nav-main li { 
    font-family: 'Work Sans', sans-serif; 
    font-size: 18px; 
    color:white; 
} 

.section-content { 
    padding: 5rem 0; 
} 

#about { 
    background: url('img/working.jpg') center center no-repeat; 
} 

.about-text{ 
    background: rgba(0,0,0,0.8); 
    color: white; 
    padding: 1.875rem; 
} 

#footer-main { 
    background: #f1163e; 
    color:white; 
    font-size: 0.8rem; 
    padding: 2.5rem 0; 
} 



@media (min-width: 158px) and (max-width: 600px) { 
#header-container { 
    padding-left: 0%; 
    padding-right: 0%; 
} 

    .headerleft { 
     background-position: center left; 
     background-size: contain; 
     background-repeat: no-repeat; 
     display: block; 
     min-width: 100%; 
     min-height: 100%; 
    } 

    .headerleft > a { 
     max-width: 100%; 
     max-height: 100%; 
     background-position: center left; 
     background-size: contain; 
     background-repeat: no-repeat; 
     display: block; 
     min-width: 100%; 
     min-height: 100%; 
    } 
} 

的Fiddle

Answer 2

使用媒體查詢，則需要調整基於屏幕寬度的標題圖片。然後，您可以控制尺寸，保持比例，然後在移動設備上顯示不同的佈局標識 - 例如將「學生聯盟」放在圈子下。這不會讓它太小，而且在移動設備上看起來不錯。

媒體查詢的一個例子：

@media (min-width: 900px) {} 

引導也有一些敏感的類，如visible-xshidden-xs這將有助於在這裏。