响应式标题图片（引导程序3/4）

Question

发布后，我遇到了使标题响应的更多问题。 我想用浏览器正确调整标题图像（徽标）的大小，并在移动设备上看起来正确。

调整大小后，就像此网页一样： http : //timeandspace.org/

这是小提琴链接：www.jsfiddle.net/0m4z6u25/

与上方链接的网站一样，如何获得导航栏的所有提示都将为您提供巨大的帮助！

谢谢

Answer 1

使用媒体查询，您将需要根据屏幕宽度调整标题图像的大小。 然后，您可以控制尺寸，使其保持比例，然后在移动设备上可以显示不同的布局徽标-例如，将“学生会”放在圆圈下。 这不会使其变得太小，并且在移动设备上看起来不错。

媒体查询的示例：

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

Bootstrap还具有一些响应式类，例如visible-xs hidden-xs可以在这里提供帮助。

Answer 2

首先更新bootstrap.css的版本，使用最新的稳定版（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%;
    }
}

小提琴