我想插入一个特定的图像，该图像将覆盖它所包含的父级宽度并拉伸(stretch)到浏览器的宽度。图像也应该是响应式的。我不知道该怎么做。这可能吗？预先感谢您的帮助!
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/
最佳答案
如果不从包含的父级中删除 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>
关于image - 如何使图像覆盖父宽度并拉伸(stretch)到浏览器宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15052932/