Responsive images and negative margin - responsive-design

Question

I have a site where I have an element with padding. I want the images to be the full width of the container regardless of padding, so I have added a negative margin equal to the padding to make it stretch right to the edge. The problem arises when I use responsive images. They ignore the negative margin and squish down to the container size plus padding.
Example:
<article style="padding:20px">
<img style="margin:0 -20px;">
</article>
In a non-responsive world this works fine. How would I achieve this with responsive images. I realize I could close and re-open the article tag, but this will cause a bunch of other issue in my real code, so I'm hoping for an alternative.

Answer 1

Most likely the only way is to wrap images into a div, e.g.
<article>
<p>...</p>
<div class="img-wrapper">
<img src="..." />
</div>
<p>...</p>
</article>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
with 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 */
}​​