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

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