【问题标题】:Can't set properties for logo image to be responsive无法将徽标图像的属性设置为响应式
【发布时间】:2019-04-23 09:44:48
【问题描述】:

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

在这里,我只有一个来自代码笔的简单代码,可以向您展示我想要得到的东西

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>

【问题讨论】:

  • 您错过了在示例中添加徽标
  • 无论如何你必须添加一些 JS,以了解页面何时滚动,并从那里修改你的 css

标签: html css navbar nav


【解决方案1】:

为 li 标签使用这种样式,它会给你响应式标题栏,我希望这就是你要找的

ul li {
  padding: 1vw 4vw;
}

【讨论】:

    【解决方案2】:

    每次您想要响应时,只需为图像添加填充

    【讨论】:

    • 如果不接受正确的@DConstantin,这怎么可能是一个可以接受的答案
    • 没看到,我很抱歉这个问题,我想给这个答案一个“有用”的答案,而不是让它成为最佳答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-13
    • 2019-04-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多