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

Question

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

当 img 很小时，问题就来了，以至于实际上它的宽度可能大于其原始大小，但由于 max-width 它受到限制。它下面的文本不会受到限制，因为它不知道图像的最大宽度。

编辑:这是例子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;
}