响应式横幅HTML/CSS

Question

我正在尝试为网页制作横幅.我想创建一个只能在页面高度上查看20%页面的容器,然后其中的图像占用容器的100%.但是,图像最终会占用所有页面而不响应%更改.

Html代码:

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

CSS代码:

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


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

Answer 1

如果您不想使用浮动横幅,您可以考虑更改样式,如下所示:

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

vh =查看高度.https://www.w3schools.com/cssref/css_units.asp.

如果您希望在页面滚动时跟随浮动横幅,请使用以下命令:

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