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这将有助于在这里。