如何让我的图片响应宽度和高度？

Question

我不会像我的网站的其他部分那样响应我的图像。我如何使它适应容器的大小。不仅仅是宽度，还要调整高度？

的图像是在与1300px一个最大宽度的容器，所以我已经有大小400像素高度和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) 
}