Question

我的导航栏在我的徽标图像缩小时无法正确调整大小。这是完整代码的指向Codepen页面的链接：

https://codepen.io/gabor-szekely/pen/JeMqQz

基本上，我正在尝试将左上角的“ Sino Medical”徽标图像调整为原始尺寸的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>

这是相关的CSS：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  text-align: center;
  padding: 0 1.5em;
  color: #333;
}

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  border-bottom: 1px solid #c8c8dc;
}

.top-row-logo {
  flex: 1;
}

.logo-img {
  margin-left: 3.2rem;
  height: 80%;    /* THIS IS THE ISSUE! */
}

.top-row-links, .login-links {
  margin: auto 0;
}

.top-row-links {
  flex: 1.5;
  margin-right: 3.2rem;
}

.login-links {
  margin-right: 4rem;
}

谢谢！

Answer 1

您可以将.top-row-logo设置为align-self: center，而不是将其设置为拉伸从父元素align-items声明继承的内容，并将.logo-img设置为{{1 }}消除图片下方的空白。

关于将元素的高度设置为百分比值，这unless you explicitly set the height of the imgelement's containing block是不可能的。因此，对于您的情况，您可以执行以下操作：

display: block

或者，如果您想提高动态性，可以使用一些JavaScript来设置高度，这样，即使图像的高度超过71px，它也将始终以其原始值的80％呈现。

请参阅下面的演示：

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

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

// get the img
let img = document.querySelector(".logo-img");

// retrieve it's height
let imgCSS = window.getComputedStyle(img);
let imgHeight = imgCSS.getPropertyValue("height");
imgHeight = parseInt(imgHeight);

// set the height to 80% of it's original value
let newHeight = imgHeight * 0.8;

// set the height of img element to the new height
img.style.height = newHeight + "px";

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans";
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  text-decoration: none;
  padding: 0 1.5em;
  color: #333;
  transition: color 400ms ease;
}

li a:hover {
  color: #6dacd5;
}

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  border-bottom: 1px solid #c8c8dc;
}

.top-row-logo {
  flex: 1;
  align-self: center;
}

.logo-img {
  margin-left: 3.2rem;
  display: block;
}

.top-row-links, .login-links {
  margin: auto 0;
}

.top-row-links {
  flex: 1.5;
  margin-right: 3.2rem;
}

.login-links {
  float: right;
  margin-right: 4rem;
}


.login-button {
  display: inline-block;
  color: #008fe1;
  font-size: 0.9em;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: white;
  padding: .8em 1.6em;
  border: 2px solid #008fe1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 400ms ease;
}

.login-button:hover {
  background-color: #008fe1;
  color: #fff;
}

Answer 2

使用自动高度...

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

导航栏高度无法重新调整？

2 个答案: