Wie kann man erreichen, dass <img> dieselbe Breite wie <figcaption> hat?

Wie kann in einem responsiven Design die Breite eines<figcaption> gemacht werden, um entsprechend der Breite des zu justieren<img>, aber nicht überschreiten?

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

Dasentsprechendes CSS begrenzt nur die<img> und nicht die<figcaption>, sehen:

Wie kann das<figcaption> zusammen mit dem beschränkt werden<img>, ohne mitmax-width: 200px (oder 12.5em) auf dem<figure> Container?

Hier sind die wichtigen Teile von CSS (voll auf 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;
}