How can I make the text below an image the same size as the image with the same border?

How can I make the text below an image the same size as the image with the
same border?

I am trying to have an image with caption be the same size. Instead of
having the caption be centered under the image I want the caption to be
the same size as the image.
Here is the CSS for the image: article.post .wp-caption img, article.page
.wp-caption img { border: 2px solid white; outline: 8px solid rgb(245,
222, 179); }
Here is the CSS for the caption: article.post .wp-caption, article.page
.wp-caption { text-align: center; padding: 10px; margin: 10px; background:
none; }
If you want an example of the page here it is:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
Thanks,