收縮包裝「最大尺寸」圖像

Question

將圖像max-width和max-height設置爲100％，圖像是否符合要求並將圖像縮放以適應容器的縱橫比不變。但是，我需要實現相同的功能，但是需要在圖像周圍保留一個額外的容器（，以便能夠相對於圖像定位其他內容）。

我正在尋找非JS解決方案和標記語義不是問題，因爲這是一個應用程序。 （表格可以）。圖像尺寸也可以被認爲是已知的。

另一種方式來描述我想要的東西：使圖像始終貼合身體的內部，並顯示它周圍的邊框（不使用把一個邊界圖像本身的平凡解）

這裏是一個fiddle表現問題。我給了圖像0.5不透明，使黃色容器顯示。目標是讓容器始終與圖像大小相同。 IE瀏覽器。圖像將始終具有黃色色調，但不應該顯示其他黃色區域。注意：我沒有試圖實現任何着色效果，這只是一個問題的例子。

Answer 1

試試這個，http://jsfiddle.net/xmarcos/K4dHr/

更新：http://jsfiddle.net/xmarcos/K4dHr/4/

Answer 2

這裏，這似乎工作：http://jsfiddle.net/Wexcode/vzc4m/1/

你不需要有在你<div>，因爲它最大高度如果將其設置爲display: inline-block，則會延伸到其內部元素的尺寸。強制<img>擁有display: block將確保在容器內的元素周圍沒有任何額外空間，除非您指定（使用邊距）。