如何讓我的圖片響應寬度和高度？

我不會像我的網站的其他部分那樣響應我的圖像。我如何使它適應容器的大小。不僅僅是寬度，還要調整高度？如何讓我的圖片響應寬度和高度？

的圖像是在與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%; 
     }

在它只是坐在容器，但溢出到右邊分鐘。

來源

2014-09-10 matthew smart

是的，這完全沒有問題。只需插入以下CSS：

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

來源

2014-09-10 13:32:40 JasonK

我可能還會放入最大寬度，因此圖像不會比所需的大。 – rblarsen 2014-09-10 13:33:55

是的，這是沒有問題的，但最好是容器/包裝器完成這項工作。 – JasonK 2014-09-10 13:38:47

非常感謝，這對我很有幫助！，即時通訊新的響應式設計，並花費一點時間進入。我喜歡stackoverflow，偉大的社區，實際上幫助別人不像其他網站！ – 2014-09-10 14:00:12

如何讓我的圖片響應寬度和高度？

回答

相關問題