忽略父宽度或填充

Question

如何忽略父母宽度？

假设我有一个代码如下：

HTML：

<div id="content-container">
   <h1>Subject</h1>    
   <p>More text</p>
   <p><img src="/someimg.png"></p>
</div>

CSS：

#content-container {
  margin: 0 auto;
  width: 684px
}

我也会设置一个填充而不是宽度，如：

padding-left:20%
padding-right20%

然后我希望我的图像的宽度大于它内部的容器。

#content-container img {
  width:1000px;
}

但现在这确实有效，因为图像不会从它的容器中消失。

除了使用position:absolute;或一些负边距值之外，还有其他解决方案吗？

Answer 1

将容器宽度更改为

    #content-container {
  margin: 0 auto;
  width: 100%;
}

并更改图像宽度

    #content-container img {
  width:100%;
}

您的图片宽度必须小于容器或相等

Answer 2

试试这段代码

#content-container img {width:100%;}