响应式横幅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%;
}

- barskyn

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

Answer 2

你可以将图片设置为容器的背景，而不是使用 <img> 标签。

.banner{
background-image: url("/img/header.jpg");
}

- Archit Arora

Answer 3

您可以使用vh代替percentage来设置横幅。 1vh = 1%

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


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

<div class="banner">
  <img src="http://via.placeholder.com/350x150">
</div>

- Vishal Taj PM

Answer 4

你的 .banner 没有从 CSS 中获取高度的 20%。原因是它没有一个设置高度的父元素。所以我在 html 和 body 中添加了 height: 100%。请尝试以下示例。

html,body{
  height: 100%;
}
.banner {
  width: 100%;
  height: 20%;
  background: green;
  font-size: 0;
}


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

<div class="banner">
  <img src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>

- Pons Purushothaman