В адаптивном дизайне, как ширина быть сделаны, чтобы отрегулировать в соответствии с шириной<img>, но не превышать его?

     
    
        <img src="link.jpg">
        Caption
    

соответствующий CSS только ограничивает<img> а не, увидеть:

Как можно быть ограниченным вместе с,<img>без с помощьюmax-width: 200px (или 12,5em) на контейнер?

Вот важные биты CSS (полный на 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;
}