Высота Navbar не перенастраивается?

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 на display: block, чтобы избавиться от пробела нижеthe image.

Что касается установки высоты элемента в виде процентного значения, это невозможно , если вы явно не установите высоту содержащего элемента img блока .Так что для вашего случая вы можете сделать что-то вроде ниже:

.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% от его первоначального значения.

См. демонстрацию ниже:

// 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;
}

<div class="navWrapper">
  <nav id="flex-wrapper" class="flex-wrapper">
    <div class="top-row-logo" id="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 class="navbar">
        <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>

Answer 2

использовать автоматическую высоту ...

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