图像在导航栏中没有正确调整大小

Question

我在导航栏中插入了一张图片，通过div标签。只有百分比值时，图像的大小才会变化。只有宽度更改大小，但它保持纵横比相同，所以我无法独立编辑宽度和高度。我该如何解决？哦，还有人可以告诉我如何制作，以便导航栏完全覆盖顶部？ THX

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/

你不想在uldiv没有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 
} 

Answer 2

的问题是，你设置为%ul a fixed height，它必须在px-els的auto height或高度，使孩子的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标签必须具有唯一％李标签

<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>