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%;
}

小提琴

Answer 1

看到#container相对定位，您可以#text绝对定位，以防止它拉伸#container：

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

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

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

Answer 2

你可以通过只有这个 css 来完成这项工作：

#container
{
    display:table-caption;
}

小提琴

Answer 3

试试这个小提琴

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

img {
    max-width:100%; max-height:100%;
}
#text{
    max-width:300px;

}

Answer 4

这是你的小提琴链接。您只需要为文本 div 提供位置。

#text {
    position:absolute;
}

Answer 5

这是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;
}

Answer 6

我建议您使用正确的标签：figure和figcaption，无论如何，这是一个干净的解决方案，也适用于您的标记，您可以在这个FIDDLE中看到结果。

    figure, #container {
            display: table;
            max-width: 100%; 
            width: auto !important;
            }

        img {
            display: table-row;
            max-width: 100%;
            width:100%;
        }

        figcaption, #text {
            display: table-caption;
            max-width: inherit;
            caption-side: bottom;
            word-wrap: break-word;
        }

    <!--[if lt IE 9]><style type="text/css">
    img,
    figcaption {
        width: auto !important;
    }
    </style><![endif]-->
    <figure>
        <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" />
        <figcaption>Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</figcaption>
    </figure>
<!-- YOUR MARKUP #2 -->
    <div id="container">
        <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" />
        <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div>

    </div>

我还建议查看此博客文章以更好地调整图像大小