HTML 全宽图像，固定高度答案

【问题标题】：HTML full width image, fixed heightHTML 全宽图像，固定高度
【发布时间】：2016-08-17 11:24:57
【问题描述】：

我目前正在设计一个简单的网页，该网页将包含一个徽标、右侧的水平导航栏、下方固定高度的全宽图像，如果在某个页面上，下方还有一个额外的水平导航栏。像这样的：

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）并在其上设置固定高度，但是图像总是全尺寸。我能找到的唯一解决方案是将图像的位置设置为绝对位置，但下方的导航栏隐藏在图像下方，我不想使用 20 <br> 将其置于下方。

解决这个问题的最佳方法是什么？

这是一个sn-p：

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>

从sn-p中可以看出，即使图片设置为小，它也会变成全尺寸，就好像我根本没有设置任何属性一样。

【问题讨论】：

你能发一个weave或sn-p吗？

标签： html css image height width

【解决方案1】：

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

【讨论】：