包含更多元素的shrink-to-fit-div？

Question

最基本的問題是：一個元素本身包含其他元素時，如何縮小到適合元素？

目標是在（居中）圖像上方有一個（居中）菜單，其寬度和高度應與圖像尺寸相關。 所有這些都是響應，意味着沒有絕對大小！

Here's示例代碼：

<div id="menu"> 
    <img src="picture.jpg" /> 
    <div id="left"> 
     test1 
    </div> 
    <div id="right"> 
     test2 
    </div> 
</div> 

#menu{ 
position:relative; 
display: table; /*tried inline-block as well */ 
text-align: center; 
line-height: 1; 
} 

#menu img{ 
height: 90%; 
position:relative; 
} 

#left{ 
width: 46%; 
background-color: #ffcdcc; 
float: left; 
text-align: right; 
} 

#clear{ 
clear: both; 
} 

#right{ 
width: 46%; 
background-color: #324344; 
float: right; 
text-align: left; 
} 

，這是什麼it's應該看起來像：

____________________________________ 
|         | 
| ------------------------------ | 
| |       | | 
| |  p i c t u r e   | | 
| |       | | 
| |       | | 
| |       | | 
| |       | | 
| | left <button> right  | | 
| |       | | 
| ------------------------------ | 
|         | 
------------------------------------ 

圖片的高度/寬度比爲總是一樣。它的總大小取決於用戶窗口。

我只是不能得到「菜單」div來環繞，「左」和「右」divs可以同時定位。

這甚至可能嗎？ I'm甚至不是在談論瀏覽器compatibiliy尚未...

Answer 1

見，如果這個工程：http://jsfiddle.net/sdvnh/1/

變化：

#menu { 
display: block; 
} 

#menu img{ 
height: 90%; 
width: 90%; 
}