导航栏中的图像未正确调整大小

Question

我在导航栏中通过 div 标签插入了一张图片。仅当值以百分比表示时，图像的大小才会改变。只有宽度会改变大小，但它会保持纵横比不变，所以我无法独立编辑宽度和高度。我该如何解决？哦，还有，有人能告诉我如何让导航栏完全覆盖顶部吗？谢谢

ul {
  list-style-type: none;
  margin: 0px auto;
  background-color: #f1f1f1;
  position: fixed;
  width: 95%;
  height: 10%;
  text-align: center;
  border: 3px solid #999
}

.nav img {
  float: left;
  margin-right: 0;
  padding: 0;
  width: 17.9%;
  height: 0.05%
}

li {
  display: inline-block;
  margin: 2%
}

li a {
  font-size: 160%;
  color: #000;
  background-color: #81DAF5;
  text-decoration: none
}

li a:hover {
  color: blue;
  background-color: #FFFFFF;
  transition: background 0.3s linear
}

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

Answer 1

试试这个https://jsfiddle.net/28kL2hvu/1/

如果不先将 li 包装在 ul 中，您不会想要 div。 当对宽度和高度使用百分比时，您需要将父容器的宽度和高度设置为特定值。这样当您在子 div 上使用百分比值作为高度和宽度时，它们只会增长到父容器上的指定值。

<div class="parent">
  <div class="nav">
    <a href="index.html">
      <img src="navpic.png" alt="Logo">
    </a>
  </div>
  <div><a href="#">Page</a></div>
</div>

.parent {
  list-style-type: none;
  margin: 0px auto;
  background-color: #f1f1f1;
  position: fixed;
  width: 500px;
  height: 50px;
  text-align: center;
  border: 3px solid #999
}

.nav img {
  float: left;
  margin-right: 0;
  padding: 0;
  width: 25px;
  height: 10px
}

li {
  display: inline-block;
  margin: 2%
}

li a {
  font-size: 160%;
  color: #000;
  background-color: #81DAF5;
  text-decoration: none
}

li a:hover {
  color: blue;
  background-color: #FFFFFF;
  transition: background 0.3s linear
}

Answer 2

问题是您设置为%ul a fixed height，它必须是auto height 或px-els 中的高度，以便子div 可以使用% 值来表示高度。

ul {
    list-style-type: none;
    margin: 0px auto;
    background-color: #f1f1f1;
    position: fixed;
    width: 95%;
    height: auto;
    text-align: center;
    border: 3px solid #999;
    display: flex;
}
.nav img {
    margin-right: 0;
    padding: 0;
    width: 50px;
    height:70px;
}
li {
    display: inline-block;
    margin: 2%
}
li a {
    font-size: 160%;
    color: #000;
    background-color: #81DAF5;
    text-decoration: none
}
li a:hover {
    color: blue;
    background-color: #FFFFFF;
    transition: background 0.3s linear
}

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

现在。您的 HTML 格式不正确。 在 %ul 标签内你必须只有 %li 标签

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

上面的和平代码可以重构为

<div class="logo">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
<ul class="navigation">
  <li><a href="#">Page</a></li>
</ul>