如何使 <img> 与 <figcaption> 的宽度相同？

Question

在响应式设计中，如何使<figcaption> 的宽度根据<img> 的宽度进行调整，但又不超过它？

 <section>    
    <figure>
        <img src="link.jpg">
        <figcaption>Caption</figcaption>
    </figure>
</section>

corresponding CSS 只限制<img> 而不是<figcaption>，请参阅：

如何在<figure> 容器上使用max-width: 200px（或12.5em）来限制<figcaption> 和<img>，没有？

---

以下是 CSS 的重要部分 (full on JSFiddle)：

section figure {
    position: relative;
    margin: 0 auto; /* to center it */
}

section figure img {
    max-width: 100%;
    vertical-align: middle; /* to make sure images behave like blocks */
}

section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
}

Answer 1

在section 上设置max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) 或float: [left|right] (http://jsfiddle.net/cdmU3/1/) 会使其收缩以适应其内容（以及它所在的框）。不过，您可能需要重新设计一些其他内容以适应这些更改。

或者，尝试在 img 上设置 width: 100%; height: auto;，并在 figure 元素上设置宽度？ http://jsfiddle.net/9yUsP/

（在img 上设置height: auto; 意味着无论height 或width 属性在img 元素本身上设置如何，它都会保留其纵横比）