Em um design responsivo, como pode a largura de um<figcaption> ser feito para ajustar de acordo com a largura do<img>, mas não excedê-lo?

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

oCSS correspondente apenas limita o<img> e não o<figcaption>, Vejo:

Como pode o<figcaption> ser restringido junto com o<img>, sem usandomax-width: 200px (ou 12.5em) no<figure> recipiente?

Aqui estão os bits importantes do CSS (completo no 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;
}