Question

我正在尝试在bootstrap中插入我的品牌徽标，而且我很难调整它的大小。保存的图像大小为＆＃34; 200X150＆＃34;但是它远小于查看时的图像。

一旦申请

<a class="navbar-brand" href="#">
  <img src="img/rsz_arabella.png" alt="">
</a>

它出现在导航栏的下方，需要调整大小才能明显适应内部。我尝试将img设置为max-width：100％，max-height：100％。它适合导航栏品牌，但它变得太小而无法查看。我是否将图像保存为不正确的尺寸？我的定位不正确吗？

请在页面底部查看我的品牌形象。

感谢。

<body>
  <div class="container">
  <!-- 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 src="img/rsz_arabella.png" alt="">
      </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</body>

Answer 1

试试这个：

.navbar-brand {
    height: auto;
}

img {
    max-width:100%;
}

Answer 2

您的图片最大宽度应为100％，或者根据您的img标记添加类img-response。

Answer 3

在bootstrap中给出了css，或者更好的为img添加类名是img-responsive

display: block;
max-width: 100%;
height: auto;

图像未正确调整导航栏中的大小。 {}自举

3 个答案: