如何将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%;
}

小提琴

Answer 1

眼见为#container相对定位,您可以定位#text绝对,以防止拉伸#container:

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

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

当然,这也会阻止垂直拉伸,而不是推迟跟随内容.这可能是不受欢迎的？

Answer 2

这是JSFIDDLE 上的答案
您需要添加一个position:absolute到您的<div id="text">..</div>：

这是您应该应用的 CSS：

#text{
    position:absolute;
    bottom:0;left:0;
    width:100%;
    background:#444;
    color:#FFF;
    text-align:center;
    font-size:11px;
    line-height:14px;
    padding:2px 0;
}