响应式横幅 HTML/CSS

Question

我正在尝试为网页制作横幅。我想创建一个仅在页面高度方向上查找 20% 的容器，然后其中的图像将占容器的 100%。然而，图像最终占据了整个页面并且没有响应 % 变化。

网页代码：

 <div class="banner">
<img src="img/header.jpg">
  </div>

CSS 代码：

 .banner {
  width: 100%;
  height: 20%;
}

.banner img {
  height : 100%;
  width: 100%;
}

原文由 barskyn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您不想使用浮动横幅，您可以考虑将样式更改为：

 .banner {
  width: 100%;
  height: 20vh;
}

vh = 视图高度。 https://www.w3schools.com/cssref/css_units.asp 。

如果您希望浮动横幅随着您的页面滚动而跟随，请使用：

 .banner {
  width: 100%;
  height: 20vh;
  position:fixed;
}

原文由 Hans Yulian 发布，翻译遵循 CC BY-SA 3.0 许可协议