響應式圖像和負邊距

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