css - How to make my image responsive width and height? -

i wont image responsive rest of website be. how make adjust size of container. not width resize height?

the image in container max-width of 1300px, have made test image has sizes 400px height , 1300px width

here jsfiddle can have @ mean.
http://jsfiddle.net/z6fj8dtg/2/

    <div id="wrapper">         <div id="codeback">         </div>         <div id="container">          <div class="nav">         </div>         <div id="wrap">             <div class="banner">                 <img src="http://s12.postimg.org/vnsghsvf1/banner.png" >             </div><!-- end of banner -->         </div>     </div><!-- end of container -->         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%;         } 

at minute sits in container overflows right.

yes that's no problem @ all. insert following css:

.banner img {     width: 100%;     height: auto; //auto adjust height (maintain aspect ratio) }