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

我希望我的文章中包含的图像是全宽的，但我的文章容器有填充。如何使图像填充填充填充

.post{
填充：40px；
颜色：#000；
背景色：#fff；
背景重复：无重复；
宽度：700px；
}
.后img{
高度：自动；
最大宽度：100%；
}

下面是我尝试做的一个例子：

---

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

在下面的代码段中，第二个子项具有负数

左边距

和

右边距

，它们与父项的

填充

相匹配：

---

您应该更多地分解元素，并在post容器中为每个元素的类编写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%;
}

---

您应该为父级填充使用负边距进行补偿。然而，诀窍是使用

框大小：边框框，因此您不必在其上使用
溢出：隐藏
，以防止出现水平滚动条


正文{
保证金：0；
}
.邮政{
填充：40px；
颜色：#000；
背景色：#fff；
背景重复：无重复；
宽度：100%；
位置：相对位置；
溢出：隐藏；
框大小：边框框；
}
.后img{
宽度：计算（100%+80px）；
位置：相对位置；
左：-40px；
顶部：-40px；
利润率：0-80px-40px 0；
右边距：-80px；
}

这里有一些内容。。。
prepare jsfiddle，那样会更简单。您可以从post中删除填充并将其附加到子节点，或者可以将img设置为类似以下内容：
marginleft:-40px；宽度：calc（100%+80px）
，但正如我所说的-jsfiddle，我们可以开始玩了。从长远来看，这将导致比它要解决的问题更多的问题。除非你正在用动画做一些事情，否则没有理由使用负边距。@MaxBaldwin问题是明确的
我该怎么做才能让我的图像填充填充？
，因此我在这里假设我们无法控制父对象的样式。@MaxBaldwin，我非常感兴趣地听到你们关于为什么在CSS中要避免负边距的论点。我真的对你在这个问题上的观点很感兴趣。@AndreiGheorghiu，作为一名经验丰富的开发人员，我可以告诉你，当你使用负边距或填充时，你并不是在解决问题，而只是在问题上缠上绷带。解决这一问题的办法不是填补空白，而是修复已经犯下的错误，而不是在错误的基础上再接再厉。负边距和填充几乎没有可接受的用途。这不是其中之一。人们倾向于认为我是一个有经验的前端开发人员，虽然我不断告诉他们我唯一知道的是我有多不知道。然而，如果我们注意到元素的框大小是负的（这样它就不会从周围推拉任何东西），我真的看不到任何错误或意外的行为。您能提供一个由于负边距而导致的不必要行为的例子吗？如果这是WordPress，正如我所怀疑的那样，虽然您的解决方案有效且技术上正确，但由于主题如何在大多数WP主题中动态构建不同的模板，它也可能会产生很多负面影响。@AndreiGheorghiu，如果公平的话。你怎么能假设这是Wordpress提供的信息？他提供的课程非常通用。你是对的，从我看到这个问题的那一刻起，这更多的是我脑海中的一种感觉，而不是一个合乎逻辑的结论。不知道我为什么会想到这个，但我想到了。然而，我不认为在寻找前端解决方案时，考虑现在的应用程序模板化是一件坏事。我不是有意猜测的，如果你觉得我这样做了，我深表歉意。这是我在试图给这个问题一个好答案时建立的情景。@AndreiGheorghiu，没有理由道歉。我只是想知道你是否看到了我没有看到的东西。一个特定于Wordpress的答案可能会对将来遇到这个问题的用户有所帮助。我的代码太乱了，我找不到解决方案。字面上非常感谢你的帮助@马克斯鲍德温