이미지의 너비와 높이를 어떻게 조절합니까?

Question

내 웹 사이트의 나머지 부분처럼 응답 할 수있는 이미지가 없습니다. 컨테이너의 크기에 맞게 조정하려면 어떻게해야합니까? 너비뿐만 아니라 높이의 크기도 조정할 수 있습니까?

이미지는 1300px의 최대 폭과 용기에, 그래서 난 당신이 한 번 봐 가질 수 있도록 여기에

가 jsfiddle 인 크기를 폭 400 픽셀 높이 1300px이있는 테스트 이미지를 만든 것을 내말은. 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) 
}