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

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

ul{
列表样式类型：无；
保证金：0px自动；
背景色：#f1f1；
位置：固定；
宽度：95%；
身高：10%；
文本对齐：居中；
边框：3倍实心#999
}
.导航img{
浮动：左；
右边距：0；
填充：0；
宽度：17.9%；
身高：0.05%
}
李{
显示：内联块；
利润率：2%
}
李阿{
字体大小：160%；
颜色：#000；
背景色：#81DAF5；
文本装饰：无
}
李娜：停下来{
颜色：蓝色；
背景色：#FFFFFF；
过渡：背景0.3s线性
}

试试这个

您不希望在

ul

中使用

div

而不首先将其包装在

li

中。 使用宽度和高度百分比时，需要将父容器的宽度和高度设置为特定值。因此，当在子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
}

.家长{
列表样式类型：无；
保证金：0px自动；
背景色：#f1f1；
位置：固定；
宽度：500px；
高度：50px；
文本对齐：居中；
边框：3倍实心#999
}
.导航img{
浮动：左；
右边距：0；
填充：0；
宽度：25px；
高度：10px
}
李{
显示：内联块；
利润率：2%
}
李阿{
字体大小：160%；
颜色：#000；
背景色：#81DAF5；
文本装饰：无
}
李娜：停下来{
颜色：蓝色；
背景色：#FFFFFF；
过渡：背景0.3s线性
}

问题是您将

%ul设置为固定高度

，它必须是

自动高度

或

px els中的高度

，以便子div可以使用%值来表示高度

ul{
列表样式类型：无；
保证金：0px自动；
背景色：#f1f1；
位置：固定；
宽度：95%；
高度：自动；
文本对齐：居中；
边框：3px实心#999；
显示器：flex；
}
.导航img{
右边距：0；
填充：0；
宽度：50px；
高度：70像素；
}
李{
显示：内联块；
利润率：2%
}
李阿{
字体大小：160%；
颜色：#000；
背景色：#81DAF5；
文本装饰：无
}
李娜：停下来{
颜色：蓝色；
背景色：#FFFFFF；
过渡：背景0.3s线性
}

为什么将固定高度设置为%ul是一个问题？总的来说，这不是一个问题，如果需要固定高度的导航包装，然后处理内部内容，则会出现一些情况。在你的例子中，你有和

float:left

，上面的父母不能知道它的高度。您可以尝试向家长添加一个clearfix。另外一个用于您的解释