如何使圖像覆蓋父寬度和拉伸到瀏覽器寬度？

Question

我想要插入一個特定的圖像，它將被覆蓋，並且它所包含的父寬度被拉伸到瀏覽器的寬度。圖像也應該有反應。我無法弄清楚如何做到這一點。這甚至有可能嗎？預先感謝您的幫助！

的html代碼：

<div id="wrapper"> <img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" /> <p>This is a test</p> </div>

CSS代碼：

#wrapper { width: 300px; margin: 0 auto; } #pic { width: 100%; }

的jsfiddle鏈接在這裏：http://jsfiddle.net/9Ttyh/

Answer 1

不能可靠地達到你想要的東西無需拆卸img來自所包含的父母。

你的HTML應該是這樣的：

<img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" /> 
<div id="wrapper"> 
    <p>This is a test</p> 
</div> 

http://jsfiddle.net/cGLeY/

Answer 2

你可以做到這一點的設置：min-width: 100%的形象，我希望得到你的權利。 的jsfiddle：http://jsfiddle.net/Usuz4/

#wrapper { 
    width: 300px; 
    margin: 0 auto; 
} 
img { 
    min-width: 100%; 
} 

，如果你把你min-width強制元素得到至少提供大小，如果你把它100%必須採取母公司寬度100%。