圖像在導航欄中沒有正確調整大小

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>