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，以防止它拉伸#container：

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

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

当然，也会阻止垂直拉伸，而不会推迟关注内容。这可能是不受欢迎的？

Answer 2

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

#container
{
    display:table-caption;
}

Fiddle

Answer 3

试试这个FIDDLE

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

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

}

Answer 4

这是你的fiddle link。你只需要给文本div定位。

#text {
    position:absolute;
}

Answer 5

Here is the answer on 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

我建议您使用正确的标签：数字和 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>

我还建议您查看this blog post以获得更好的图像调整大小

如何将div与图像相匹配？

6 个答案: