固定宽度页面上的全宽div

Question

我有一个固定宽度的居中页面，并且必须在页面中间插入一个全宽图像。最好的方法是什么？

Answer 1

http://jsfiddle.net/c59Pw/

CSS：

.container {
    width:500px; 
    margin:0 auto;
    background-color:purple;
    padding:30px;
}
img {
    position:absolute;
    width:100%;
    left:0;
}

HTML：

<div class="container">
    <p>Copy here.</p>
    <img src="http://www.placecage.com/c/500/300">
 </div>

Answer 2

我会在你的包装器中使用<img>标签。

Answer 3

根据容器或页面大小的全宽，您只需在CSS中使用：

width: 100%;

对于固定大小，请输入像素或其他单位，如下所示：

width: 250px;

http://www.w3schools.com/cssref/pr_dim_width.asp