无法将徽标图像的属性设置为响应

Question

我想构建一个在向下滚动时改变其大小的导航栏。问题是我不知道如何使我的徽标图像具有响应性。我的意思是当 header 在顶部时是全宽和全高，当我缩小我的导航栏以按比例缩小时。

下面我有一个来自代码笔的简单代码，可以向您展示我想要得到的东西

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

将此样式用于 li 标签，将为您提供响应式 header 栏，我希望这就是您要找的东西

ul li {
  padding: 1vw 4vw;
}

Answer 2

每次您想响应时，只需向图像添加填充

无法将徽标图像的属性设置为响应

Can't set properties for logo image to be responsive

html

css

nav

navbar