*已编辑*当图像具有最大宽度时对齐图像及其标题

Question

我有一个固定宽度的div，带有图像和可变尺寸标题。 现在，img已max-width=100%以防止缩放超出原始大小。 那么，我如何格式化该标题，使其宽度不大于图像，希望不使用js？

当img很小时问题出现，实际上它的宽度可能大于原始大小，但由于最大宽度，它会受到限制。它下面的文字没有受到约束，因为它无法知道图像的最大宽度。

编辑：以下是示例http://jsfiddle.net/bendtherules/L4Erc/我希望文字的宽度与显示的图像相同，并且正好在其下方。

HTML：

<div class="wrapper">
    <img src="http://jsfiddle.net/img/logo.png" />
    <p>
        This is a caption bigger than image
    </p>
</div>

CSS：

.wrapper{
    text-align: center;
}
.wrapper img{
    max-width: 100%;
    background-color: green;
}
p{
    border: 1px dashed;
}

Answer 1

在这里，您可以使用display:table-caption;。

DEMO

HTML

<div class="outter-wrapper">
    <div class="inner-wrapper">
        <img src="http://jsfiddle.net/img/logo.png" />
        <p>
            This is a caption bigger than image
        </p>
    </div>
</div>

CSS

.outter-wrapper{
    text-align: center;
    border: 1px dashed;
}
.inner-wrapper{
    display:table;
    border: 1px dashed;
    margin: 0 auto;
}
.inner-wrapper img{
    background-color: green;
    max-width: 100%;
}
p{
    border: 1px dashed;
    display:table-caption;
    caption-side:bottom;
}