Set html figure-width to same as width of image it

Question

When having a image inside a figure-tag, the figure width is 100%. How do I make so that the the figure always will have the same width as the image? Here's my current code:

HTML:

<figure>
    <img src="http://www.google.com/images/srpr/logo3w.png" alt="" />
</figure>

CSS:

* {
    margin: 0;
    padding: 0;
}

figure {
    border: 1px solid red;
}

img {
    border: 1px solid blue;
    vertical-align: top;
}

Answer 1

You could also do this with jquery, even though it's a bit of a hack:

var imgWidth = $("figure img").width();
     $("figure").width(imgWidth);

This is a fix if, for some reason, display: table isn't working for you in your css stack, or you need that element to be a different display type.

Answer 2

Event though you have not asked for any JS solution .here is my solution for your problem.

On image load change width and height of figure

Assuming figure is parent of img

   $(document).ready(function(){
         $("img").load(function(){

              $(this).parent().width( $(this).width());

           });   
    });

Answer 3

Add display:table to figure css like this

figure 
{
    display:table;
    border: 1px solid red;
}

JS Fiddle Demo