爲什麼不是圖像100％，如何讓它適應瀏覽器？

Question

我試圖讓圖像伸展100％寬度的瀏覽器，但我似乎在某處出錯。

這裏有一個Fiddle.

我會在最後添加代碼。

我發現了一些similar，但我無法理解他們的代碼在檢查。

他們是如何使圖像適應瀏覽器？

他們使用Jquery嗎？

在此先感謝。

碼 -

HTML：

<div id="header"> 
    <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Collin Hughes"> 
</div> 
    <div id="outer" > 
     <div id="inner"></div> 
</div> 
    </body> 

CSS：

body, html { 
    margin: 0; 
    width: 100%; 
    } 

#header{ 
    position: relative; 
    width: 100%; 
    height:auto; 
    background-size: 100%; 
    margin: 0; 
    } 

#outer{ 
    position: relative; 
    width: 90%; 
    height: 500px; 
    background-color: red; 
    margin-top:30px; 
    margin-right: auto; 
    margin-bottom: 30px; 
    margin-left: auto; 
    padding: 20px 0 0 0; 


} 

#inner{ 
    width: 200px; 
    height: 250px; 
    background-color: lightblue; 
    margin: 0 auto; 
    top: 20px; 
} 

Answer 1

你需要把它添加到您的CSS爲目標的圖像。這就是其他網站也是這樣做的。

#header img { width:100% } 

Answer 2

您沒有在圖像上設置寬度，而只在#header上設置寬度。
您可以添加以下修復：

#header img{ 
    width: 100%; 
} 

這也將保證寬度始終爲100％，甚至改變瀏覽器的大小時。
您可以通過重新調整結果框的大小來嘗試更新下面的提琴。

見DEMO