html - 如何使div适合图像？

Question

我在一个 div 中有一个流畅的图像，在图像下面有另一个带有文本的 div。 #text div 是否有可能获得与图像相同的大小？

<div id="container">
    <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg">
    <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div>
</div>


#container {
    display: inline-block;
    height: auto;
    max-width: 100%;
    position: relative;
}

img {
    max-width:100%; max-height:100%;
}

FIDDLE

Answer 1

鉴于 #container 是相对定位的，您可以绝对定位 #text，以防止它拉伸(stretch) #container:

#text {
    /* remove from flow, prevents from stretching container */
    position: absolute;
}

http://jsfiddle.net/HUsRm/5/

当然，这将也防止垂直拉伸(stretch)，并且不会将后续内容向下推。这可能是不需要的？