引导图像无响应

Question

我正在使用引导等和背景图像添加徽标。我不确定我这样做是否正确，但是当我调整窗口大小时，导航栏本身会变小，但导航栏中的图像却不是。有人知道为什么吗？

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="logo">
        <img src="Image/Logo.png"/>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#about">About</a></li>
        <li><a href="#about">Login</a></li>
        <li><a href="#about">Become A member</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS：

body { 
    background: url('../Image/BackgroundImage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-default {
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    margin-top: 60px;
    height: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
     padding:28px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    color: #ffcb80;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
    color: #ffcb80;
    background-color: transparent;
}

.logo {
    margin-left: 4em;
}

所以它是我的徽标 div，目前没有重新调整大小。另外我对我的背景图像有疑问，通常它们不需要调整大小？我的只是剪掉了，你只看到它的一部分，这样好吗？还是编码不好？

Answer 1

要使图像在 Bootstrap 框架中响应，您需要向图像标签添加一个类：

• class="img-responsive"

在此处查看引导程序文档以获取更多详细信息：

• http://getbootstrap.com/css/#images

示例：

<img src="Image/Logo.png" class="img-responsive" />