title: How to make my image responsive width and height?
body: <p>I wont my image to be responsive like the rest of my website will be. How do i make it adjust to the size of the container. Not just the width but also resize the height?</p>
  
  <p>The image is in a container with a max-width of 1300px, so i have made a test image that has the sizes 400px height and 1300px width</p>
  
  <p>Here is the jsfiddle so you can have a look at what i mean.<br>
  <a href="http://jsfiddle.net/z6fj8dtg/2/" rel="nofollow">http://jsfiddle.net/z6fj8dtg/2/</a></p>
  
  <pre><code>    &lt;div id="wrapper"&gt;
          &lt;div id="codeback"&gt;
          &lt;/div&gt;
          &lt;div id="container"&gt;
  
          &lt;div class="nav"&gt;
          &lt;/div&gt;
          &lt;div id="wrap"&gt;
              &lt;div class="banner"&gt;
                  &lt;img src="http://s12.postimg.org/vnsghsvf1/banner.png" &gt;
              &lt;/div&gt;&lt;!-- END OF BANNER --&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- END OF CONTAINER --&gt;
  
  
  
  
  
  
  
   body{
          background-color:#272822;
          padding:0;
          margin:0;
      }
  
          #wrapper{
              width:100%; 
              height:inherit;
          }
          #codeback{
              width:100%;
              height:100%;
              background-image:url('capture.jpg');
                background-repeat: no-repeat;
              position:fixed;
              left:0px;
              top:0px;
              z-index:-1;
  
          }
          #container{
              width:100%;
              float:right;
  
          }
          .nav{
              margin-top:200px;
              width:80%;
              max-width:1300px;
              height:50px;
              float:right;
              background-color:black;
              position:relative;
  
          }
  .fixedNav {
      position:fixed;
      margin:0;
      width:80%;
      right:0;
  }
  
          #wrap{
              float:right;
              width:80%;
              max-width:1300px;
              height:1500px;
              background-color:white;
              box-shadow: -1px -1px 35px lightblue;
          }
          .banner{        
              max-width:100%;
          }
  </code></pre>
  
  <p>At the minute it just sits in the container but overflows to the right.</p>