彈性/響應圖像擴大外部目前的容器

我使用這個（http://webdesignerwall.com/tutorials/css-elastic-videos）網站的一些代碼有一個很好的「彈性」視頻容器，將與我的響應式設計大小。彈性/響應圖像擴大外部目前的容器

我期待着做類似的事情，但有圖像。所以它調整設計，保持比例，並允許它擴大一點，超出當前集裝箱的利潤率。

我想我需要將圖像包裝在一個div和位置，但不知何故，但我只是需要一些建議，如果有人做了類似的事情。確切的尺寸/等並不重要，只是其背後的過程。謝謝！

下面是我要找來完成圖像：http://i.stack.imgur.com/84KvA.gif

what I want

2011-10-20 user1005327

因此，當您調整窗口大小時，圖像的寬度比外部容器的寬度增加了一些（而圖像邊距減小），直到圖像寬度爲100％，圖像邊距爲0px？我非常懷疑這可以在純CSS中完成，但應該可以通過javascript來完成。 – Nix

對不起，我知道這很難形象化。想想郵政容器（灰色）有30px的填充。我可以從頂部吸取-30px的餘量並左移以移動圖像（相對定位），但是我不知道如何將它拉伸到另一側。對不起，這個不好的例子...甚至不知道怎麼說這個。 – user1005327

怎麼是這樣的：

img { 
    max-width: 110%; 
    margin: 0 -5%; 
}

來源

2011-10-20 15:02:00 Gerben

我會給出一個答案，但我認爲現在我必須重新考慮我的整個想法，現在我以書面形式看到它。：（好吧！ – user1005327

只是一個更新，我決定打破圖像從內容中，我會添加假類，以幫助解釋我做了什麼...

<div class='no-longer-padded-post-element'> 

<img src="now-can-span-full-width.jpg" /> 

    <div class='content-with-padding'> 
     title 
     content 
     meta 
     etc. 
    </div> 

</div>

來源

2011-10-21 14:36:54 user1005327

彈性/響應圖像擴大外部目前的容器

回答

相關問題