W responsywnym projekcie, jak można uzyskać szerokość a<figcaption> być dostosowany do szerokości<img>, ale nie przekraczaj tego?

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

Theodpowiedni CSS ogranicza tylko<img> a nie<figcaption>, widzieć:

Jak można<figcaption> być ograniczonym wraz z<img>, bez za pomocąmax-width: 200px (lub 12.5em) na<figure> pojemnik?

Oto ważne elementy CSS (pełne na 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;
}