导航栏上的品牌标识 - 我做错了什么？

Question

有没有办法动态调整导航栏品牌徽标图片的大小，以便越过导航栏本身而不会丢失它的大小？

我希望将它固定在导航栏的顶部并将其固定。我不希望导航栏调整到图像。

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
  background-color: #97CACA;
  color: #fff;
  padding: 1% 0;
  font-size: 1.2em;
}

.navbar-brand>img {
  max-height: 100%;
  height: 100%;
  width: auto;
  margin: 0px;
}

.navbar-brand {
  float: left;
  min-height: 100px;
  padding: 0 0px;
}

.navbar-inverse .navbar-nav .active a,
.navbar-inverse .navbar-nav .active a:focus,
.navbar-inverse .navbar-nav .active a:hover {
  color: #fff;
  background-color: #97CACA;
}

.navbar-inverse .navbar-nav li a {
  color: #E2F2E8;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="MyNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <img src="https://preview.ibb.co/cuc7sb/logo_sitters.png"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">A Nossa Missão</a></li>
        <li><a href="#">Os Nossos Serviços</a></li>
        <li><a href="#">Contactos</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

你可以给一个位置：绝对你的 .navbar-brand 并删除float：left 添加顶部：0和左：0将其放置到位。你可以相应地改变它们。

.navbar-brand {
  min-height: 100px;
  padding: 0 0px;
  position: absolute;
  top: 0;
  left: 0;
}

此外，您需要在此之后设置样式，因为它将在您的徽标后面

（这是一个粗略的解决方案）

.navbar-inverse .navbar-collapse ul {
  float: right;
}

示例：https://jsfiddle.net/d67y3Ltn/1/