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

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%父宽度。