Shrinkwrap image container with caption

I'm having some trouble adding a caption to a shrink wrapped div whose width is being provided by an image.

The thing is, I want the width of the image to be set by a user through PHP which in turn will affect the width of the parent div.

<div class="shrinkwrap">
   <img src="image.jpg" width="$width">
</div>

.shrinkwrap {
    display: inline-block;
    border: 1px solid #FFF;
}

This useful trick has served me well, but when I want to add a caption to the image, and said caption exceeds the width of the image, it pushes the width of the parent div.

I've tried different approaches with this caption (positioning, flexbox, etc) but since the shrinkwrap container will take the width of it's children, if the caption is the widest, it will affect the overall look of this.

Setting the width of the container div and giving the image 100% width is a quick solution but to make it dynamic I had to use inline styles which isn't nice.

Any help would be greatly appreciated!

HTML:

<div class="shrinkwrap">
<img id="version1" src="http://placehold.it/520x320" width="320px" alt="" />

  <div class="caption">
     Lorem ipsum dolor sit ius ex admodum consequuntur, te dicunt epicurei invenire eum, te ius vocent eligendi. Sed unum persecuti te, tempor nostrud disputationi eos ad. ius ex admodum consequuntur, te dicunt epicurei inv!
  </div></div>

CSS:

.shrinkwrap { 
   border: 1px solid red;
   display: inline-block;
}

#version1 {
    display: block;
    max-width: 100%;
}

.caption {
  text-align: center;
  border-top: 1px solid red;
  padding: 10px;
}

http://jsfiddle.net/nx39rkev/49/