Невозможно установить свойства для изображения логотипа, чтобы оно было отзывчивым

Question

Я хочу построить навигационную панель, которая меняет свой размер при прокрутке вниз. Проблема в том, что я не знаю, как сделать мой логотип более отзывчивым. Я имею в виду, когда верхний колонтитул находится на всю ширину и высоту, а когда я уменьшаю навигацию, чтобы уменьшить ее.

Здесь у меня есть простой код из кодового пера, чтобы показать вам, что я пытаюсь получить

nav {
  background: #555;
  height: 80px;
}

.nav-content {
  display: flex;
}

.logo {
  height: auto;
  width: 100%;
}

ul {
  display: flex;
  list-style: none;
}

ul li {
  padding: 1rem 4rem;
}

<nav>
  <div class="nav-content">
    <div>
      <img class="logo" src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">
    </div>
    <ul>
      <li>Number1</li>
      <li>Number2</li>
      <li>Number3</li>
      <li>Number4</li>
      <li>Number5</li>
    </ul>
  </div>
</nav>

Answer 1

Просто добавьте отступ к изображению каждый раз, когда вы хотите быть отзывчивым

Answer 2

Используйте этот стиль для тега li и получите отзывчивый заголовок, и я надеюсь, что это то, что вы ищете

ul li {
  padding: 1vw 4vw;
}