响应式图像和负边距

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 */ 
}​​