Html 导航栏高度未重新调整？

我有一个导航栏，当我的徽标图像缩小时，它无法正确调整大小。以下是完整代码的Codepen页面链接：

基本上，我正在尝试将左上角的中医标志图像的大小重新调整为原始大小的80%，但当我这样做时，整个导航栏并没有随之收缩，因此太高

有人能帮忙吗

以下是HTML：

<div class="navWrapper">
  <nav class="flex-wrapper">
    <div class="top-row-logo">
    <img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
    </div>
    <div class="top-row-links">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="login-links">
      <ul>
        <li>
          <a href="#" class="login-button">Login</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

谢谢

使用自动高度

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height:auto;
}

您可以将.top行徽标设置为对齐self:center，而不是将其设置为从父元素对齐项声明继承的拉伸，并将.logo img设置为display:block以消除图像下方的空白

关于将元素的高度设置为百分比值，这是不可能的。因此，对于您的情况，您可以执行以下操作：

.top-row-logo {
  flex: 1;
  align-self: center;
  height: calc(71px * 0.8);
}

.logo-img {
  margin-left: 3.2rem;
  height: 100%;
  display: block;
}

或者，如果您想更具动态性，可以使用一些javascript来设置高度，这样即使图像的高度超过71px，它也将始终以其原始值的80%进行渲染

请参见下面的演示：

//获取img 设img=document.querySelector.logo-img； //取回它的高度 让imgCSS=window.getComputedStyleimg； 设imgHeight=imgCSS.getPropertyValueheight； imgHeight=高度； //将高度设置为其原始值的80% 设newHeight=imgHeight*0.8； //将img元素的高度设置为新高度 img.style.height=newHeight+px； *，*：：之前，*：：之后{ 框大小：边框框； } 身体{ 字体系列：开放式SAN； 保证金：0； 填充：0； 字号：0.8em； } 保险商实验室{ 列表样式类型：无； 保证金：0； 填充：0； 溢出：隐藏； } 李{ 浮动：左； } 李阿{ 文字装饰：无； 填充：0.1.5em； 颜色：333； 过渡：颜色400ms； } 李娜：停下来{ 颜色：6dacd5； } navWrapper先生{ 位置：固定； 排名：0； 左：0； z指数：3； 宽度：100%； } .柔性包装{ 显示器：flex； flex-flow：行nowrap； 背景色：白色； 边框底部：1px实心c8c8dc； } .顶行标志{ 弹性：1； 自对准：居中； } .logo img{ 左边距：3.2rem； 显示：块； } .顶行链接，.登录链接{ 保证金：自动0； } .顶行链接{ 弹性：1.5； 右边距：3.2rem； } .登录链接{ 浮动：对； 保证金权利：4rem； } .登录按钮{ 显示：内联块； 颜色：008fe1； 字号：0.9em； 字体系列：Roboto，无衬线； 字号：700； 文本对齐：居中； 文字装饰：无； 文本转换：大写； 背景色：白色； 填充：.8em 1.6em； 边框：2px实心008fe1； 边界半径：4px； 光标：指针； 过渡：所有400ms缓解； } .登录按钮：悬停{ 背景色：008fe1； 颜色：fff； }

---

似乎没有为我解决它。。。还有其他想法吗？这确实有效，但唯一的问题是它将图像的大小重新调整为原始大小的100%！有什么想法吗？

.top-row-logo {
  flex: 1;
  align-self: center;
  height: calc(71px * 0.8);
}

.logo-img {
  margin-left: 3.2rem;
  height: 100%;
  display: block;
}