带填充的容器中的全宽图像

Question

我希望我在帖子中包含的图片为全宽，但我的帖子容器有填充。我该怎么做才能让图像填满填充物？

.post {
  padding: 40px;
  color: #000;
  background-color: #fff;
  background-repeat: no-repeat;
  width: 700px;
}
.post img {
  height: auto;
  max-width: 100%;
}

以下是我正在尝试做的一个例子：

Answer 1

您应该更多地分解元素并为帖子容器中的每个元素类编写CSS。这样，您就可以更好地控制容器中的每种不同类型的内容或元素。

<强> HTML ：

<div class="post">
    <img src="/foo.png">
    <div class="content">
        <p>All the foo</p>
    </div>
</div>

<强>样式：

.post {
    color:#000;
    background-color:#fff;
    background-repeat: no-repeat;
    width:700px;
}

.post .content {
    padding: 40px;
}

.post img {
    width: 100%;
}

Answer 2

您应该使用父填充的负余量进行补偿。但是，诀窍是在父级上使用box-sizing: border-box;，因此您不必在其上使用overflow: hidden来阻止水平滚动条。

＆＃13;

＆＃13;

body {
  margin: 0;
}
.post {
  padding: 40px;
  color: #000;
  background-color: #fff;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.post img {
  width: calc(100% + 80px);
  position: relative;
  left: -40px;
  top: -40px;
  margin: 0 -80px -40px 0;
  margin-right: -80px;
}

＆＃13;

<div class="post">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
  <div class="content">
    Some content here...
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：添加body { margin: 0;}只是为了克服一个令人讨厌的10px边距，当片段小时添加时，它对解决方案本身并不重要。

另一个注意：我还从700px移除了.post宽度，指出此解决方案可以按比例缩放。你可以把它添加回去，它会起作用。

Answer 3

一种解决方案是在图像上应用负边距，使其与父图像的填充重叠。

在以下代码段中，第二个孩子的排名margin-left和margin-right与父排名padding匹配：

<div style="padding: 10px; background-color: red; width: 200px; height: 200px">
    <div style="background-color: green; height: 100px"></div>
    <div style="background-color: blue; height: 100px; margin-left: -10px; margin-right: -10px"></div>
</div>