Responsive Banner HTML/CSS

Question

I am trying to make a banner for a webpage. I wanted create a container that only look up 20% of the page height-wise and then the image within it would take up 100% on the container. However, the image just ends up taking up all of the page and not responding to % changes.

Html code:

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

CSS code:

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


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

Answer 1

if you dont want to use a floating banner, you might consider to change your styling as this:

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

vh = view height. https://www.w3schools.com/cssref/css_units.asp.

and if you want floating banner to follow as your page scroll, use this:

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