title: How to change image size depending window size
body: <p>I'm working on my first website. I've created a big image banner and it's working but I have a problem with setting his height. When I try to do this with % height my banner disappears. I would like to make it responsive and make it shorter when the window is small. Here is my code and CSS styles for container div:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #slides-container
  {
   width: 100%;
   height: 400px;
   margin: 0 auto;
   position: relative;
  }
  #slides-container&gt;img
  {
   width: 100%;
   height: 100%;
   position: absolute;
      max-width: 100%
  }
  #slides-container&gt;.arrow-button
  {
   position: absolute;
   width: 50px;
   height: 50px;
   border: none;
   border-radius: 25px;
   top: 200px;
   background: none;
   color: white;
   font-size: 20px;
  }
  #slides-container&gt;#button-next:hover
  {
   box-shadow: 10px 0px 20px 0px black;
  }
  #slides-container&gt;#button-previous:hover
  {
   box-shadow: -10px 0px 20px 0px black;
  }
  #slides-container&gt;#button-previous
  {
   position: relative;
   float: right;
  }
  .slide-fade
  {
   animation-name: fade;
   animation-duration: 0.2s;
  }
  @keyframes fade
  {
   from{opacity: 0.4}
   to{opacity: 1}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slides-container"&gt;
          &lt;img class="slides slide-fade img-responsive" src="img/1.jpg"/&gt;
          &lt;img class="slides slide-fade img-responsive" src="img/2.jpg"/&gt;
          &lt;img class="slides slide-fade img-responsive" src="img/3.jpg"/&gt;
          &lt;img class="slides slide-fade img-responsive" src="img/4.jpg"/&gt;
          &lt;img class="slides slide-fade img-responsive" src="img/5.jpg"/&gt;
          &lt;button class="arrow-button" onclick="plusIndex(-1)" id="button-next"&gt;&amp;#10094;&lt;/button&gt;
          &lt;button class="arrow-button" onclick="plusIndex(1)" id="button-previous"&gt;&amp;#10095;&lt;/button&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>