响应式图像和负边距

Question

我有一个网站，其中有一个带有填充的元素。无论填充如何，我都希望图像是容器的全宽，所以我添加了一个等于填充的负边距，以使其延伸到边缘。当我使用响应式图像时会出现问题。他们忽略负边距并压缩到容器大小加上填充。

例子：

<article style="padding:20px">
<img style="margin:0 -20px;">
</article>

在无响应的世界中，这可以正常工作。我将如何使用响应式图像来实现这一点。我意识到我可以关闭并重新打开文章标签，但这会在我的真实代码中引起一堆其他问题，所以我希望有一个替代方案。

Answer 1

很可能唯一的方法是将图像包装到一个 div 中，例如

<article>
    <p>...</p>
    <div class="img-wrapper">
        <img src="..." />
    </div>
    <p>...</p>
</article>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

用css

article {
    padding: 20px;
}
.img-wrapper {
    margin: 0 -20px; /* minus left/right padding of article */
    text-align: center; /* center small images */
    line-height: 0; /* remove possible gap below image */
}
​​.img-wrapper > img {
    max-width: 100%; /* max-width now is relative to .img-wrapper */
    height: auto; /* to keep aspect ratio */
}​​