Question

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

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>来获取它。

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

这是一个片段：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

正如您从代码段中看到的那样，即使图片设置为较小，也会显示完整尺寸，就像我根本没有设置任何属性一样。

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

HTML全幅图片，固定高度

1 个答案: