導航中的圖像不會調整大小

我對html很新穎，而且我在調整圖像大小時遇到問題。我使用html5和css3。我想在導航欄的右側放置一個徽標，但每次調整大小時，它都會保持其原始大小。導航中的圖像不會調整大小

nav ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    background-color: rgb(211, 11, 11); 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
} 
 

 
.navlink:link, .navlink:visited { 
 
    display: inline-block; 
 
    width: 120px; 
 
    font-weight: bold; 
 
    color: rgb(255,255,255); 
 
    background-color: rgb(211, 11, 11); 
 
    text-align: center; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.navlink:hover, .navlink:active { 
 
    background-color: rgb(162, 2, 2); 
 
} 
 

 
.navlink:first-letter { 
 
    font-size: 250% ; 
 
} 
 
nav { 
 
    position:fixed; 
 
    top: 0; 
 
    margin:auto; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    background-color: rgb(211, 11, 11); 
 
    opacity: 0.8; 
 
    border-bottom: white thin solid; 
 
    z-index: 1000; 
 
    clear: both; 
 
} 
 

 
#ucc_logo{ 
 
    float:right; 
 
    height: 5px; 
 
    width: auto; 
 
}

<nav id="navbar"> 
 
    <ul> 
 
    <a href="index.html" class="navlink"><li>Base</li></a> 
 
    <a href="output.html" class="navlink"><li>Output</li></a> 
 
    <a href="obscure.html" class="navlink"><li>Obscure</li></a> 
 
    <a href="logic.html" class="navlink"><li>Logic</li></a> 
 
    <a href="extras.html" class="navlink"><li>Extras</li></a> 
 
    </ul> 
 
    <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a> 
 
</nav>

來源

2015-03-02 PFOD1998

你所申請的高度，並以#ucc_logo其不會調整圖像大小。

你將不得不應用CSS來圖像本身。

你CA您

#ucc_logo img { 
    width: 100%; 
    height: 100%; 
}

就會使圖像的高度和寬度等於父元素

來源

2015-03-02 18:50:42

唉唉，太感謝你了，我是集中這麼多弄清楚爲什麼高度/寬度不工作，我錯過了明顯的錯誤 – PFOD1998 2015-03-02 18:59:18

你被定型了錯誤的元素。如果你想保持圖像的寬高比正確，你需要將CSS應用於它。

此外，由於錨標記和圖像遵循UL，因此浮動右鍵將把它放到下一行，而不是像我想的那樣保持在第一行（可能是錯誤的，也許你想要它在下一行）。

nav ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    background-color: rgb(211, 11, 11); 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
} 
 

 
.navlink:link, .navlink:visited { 
 
    display: inline-block; 
 
    width: 120px; 
 
    font-weight: bold; 
 
    color: rgb(255,255,255); 
 
    background-color: rgb(211, 11, 11); 
 
    text-align: center; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.navlink:hover, .navlink:active { 
 
    background-color: rgb(162, 2, 2); 
 
} 
 

 
.navlink:first-letter { 
 
    font-size: 250% ; 
 
} 
 
nav { 
 
    position:fixed; 
 
    top: 0; 
 
    margin:auto; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    background-color: rgb(211, 11, 11); 
 
    opacity: 0.8; 
 
    border-bottom: white thin solid; 
 
    z-index: 1000; 
 
    clear: both; 
 
} 
 

 
#ucc_logo{ 
 
    float:right; 
 
} 
 
#ucc_logo img { 
 
    height: 5px; 
 
    width: auto; 
 
}

<nav id="navbar"> 
 
    <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a> 
 
    <ul> 
 
    <a href="index.html" class="navlink"><li>Base</li></a> 
 
    <a href="output.html" class="navlink"><li>Output</li></a> 
 
    <a href="obscure.html" class="navlink"><li>Obscure</li></a> 
 
    <a href="logic.html" class="navlink"><li>Logic</li></a> 
 
    <a href="extras.html" class="navlink"><li>Extras</li></a> 
 
    </ul> 
 

 
</nav>

來源

2015-03-02 18:58:56

導航中的圖像不會調整大小

回答

相關問題