title: Responsive Banner HTML/CSS
body: <p>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. </p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;div class="banner"&gt;
  &lt;img src="img/header.jpg"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS code: </p>
  
  <pre><code>.banner {
    width: 100%;
    height: 20%;
  }
  
  
  .banner img {
    height : 100%;
    width: 100%;
  }
  </code></pre>