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

Question

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

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

corresponding CSS仅限制<img>而非<figcaption>，请参阅：

在<figcaption>容器上使用<img>（或12.5em）的max-width: 200px， 和如何约束<figure>？

---

以下是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

在max-width: 100%; display: inline-block;上设置float: [left|right]（http://jsfiddle.net/vZpmq/1/）或section（http://jsfiddle.net/cdmU3/1/）会使其缩小以适应其内容（以及盒子里面）。但是，您可能需要重新设计其他一些内容以适应这些更改。

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

（在height: auto;上设置img表示无论height元素本身设置的width或img属性是什么，它都会保留其宽高比