HTML全幅圖像，固定高度

我目前正在設計一個簡單的網頁，它將包含一個徽標，右側的水平導航欄，底部具有固定高度的全寬圖像，如果在某個頁面上，一個額外的horiontal navbar在下面。事情是這樣的：HTML全幅圖像，固定高度

HTML

<img src="img/imgicon.jpg" /> 
<nav id="mainnav" style="float: right /> 
<img src="img/fixedimg" style="width: 100%; height: 30%; /> 
<nav id="secondnav" />

我的問題是，固定的形象始終是全尺寸的，而不是固定的。我試過使用父容器（div）並在其上設置固定的高度，但圖像始終爲全尺寸。我能找到的唯一解決方案是將圖像的位置設置爲絕對位置，但下面的導航欄隱藏在圖像下方，我不想使用下面的圖像。

解決此問題的最佳方法是什麼？

這裏有一個片段：

body { 
 
    font-family: cambria; 
 
    margin: 0; 
 
} 
 
/*TOP NAVBAR */ 
 

 
#topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
    float: right; 
 
    height: 71px; 
 
} 
 
#topnav li { 
 
    margin-top: 13px; 
 
    float: right; 
 
} 
 
#topnav li a { 
 
    display: block; 
 
    padding-top: none; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #4d4d4d; 
 
    margin-right: 3px; 
 
} 
 
#topnav li a:hover { 
 
    color: blue; 
 
} 
 
.active1 { 
 
    color: blue; 
 
} 
 
/*SECONDARY NAVBAR */ 
 

 
#secondnav { 
 
    float: left; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #666666; 
 
    border-bottom: 5px solid #8c8c8c; 
 
    width: 100%; 
 
} 
 
#secondnav li { 
 
    float: left; 
 
} 
 
#secondnav li a { 
 
    display: block; 
 
    padding-top: none; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-right: 3px; 
 
    font-weight: bold; 
 
} 
 
#fullwidth { 
 
    width: 100%; 
 
}

<DOCTYPE html> 
 
    <html lang="en"> 
 

 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css" /> 
 
    <title>Website</title> 
 
    </head> 
 

 
    <body> 
 
    <!--LOGO--> 
 
    <div style="width: 100%; height: 71px;"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" /> 
 
     <!--MAIN NAV--> 
 
     <ul id="topnav"> 
 
     <li><a href="#">LOGIN</a> 
 
     </li> 
 
     <li><a href="#">GALLERY</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     <li><a href="courseinfo.html">INFORMATION</a> 
 
     </li> 
 
     <li><a href="index.html">HOME</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div style="height: 5%; width: 100%;"> 
 
     <img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" /> 
 
    </div> 
 
    <!--SECONDARY NAV--> 
 
    <ul id="secondnav"> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
    </ul> 
 
    </body> 
 

 
    </html>

你可以從片段所見，即使圖像設置爲小不言而喻全尺寸，因爲如果我沒有設置任何屬性。

來源

2016-04-23 Rhys Kendall

你能發佈[織]（http://kodeweave.sourceforge.net/editor/）或片段？ –

使用CSS，並給予在IMG類

#fixed { 
 
    width: 100% height: 30%; 
 
}

<img src="img/imgicon.jpg"> 
 
<nav id="mainnav" style="float: right;> 
 
<img class=" fixed; src="img/fixedimg,png"> 
 
    <nav id="secondnav"></nav>

來源

2016-04-23 23:57:11 mlegg

HTML全幅圖像，固定高度

回答

相關問題