Как сделать мое изображение чувствительным по ширине и высоте?

Question

У меня не будет моего изображения, чтобы быть отзывчивым, как и остальная часть моего сайта. Как я могу приспособиться к размеру контейнера. Не только ширина, но и изменение размера высоты?

Изображение находится в контейнере с макс-шириной 1300px, так что я сделал тестовый образ, который имеет размеры 400px и высоту 1300px ширина

Вот jsfiddle, так что вы можете взглянуть на то, что Я имею в виду.
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%; 
     } 

На минуту он просто сидит в контейнере, но перетекает вправо.

Answer 1

Да, это не проблема. Просто вставьте следующий CSS:

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