如何使图像覆盖父宽度和拉伸到浏览器宽度？

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%。