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

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

Add display:table to figure css like this
figure
{
display:table;
border: 1px solid red;
}
JS Fiddle Demo

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

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 4

Here's the CSS that solved this issue for me:
figure{
display: table-cell;
}
A plain CSS solution that I discovered while looking for a solution to the same problem raised. I really didn't want a JavaScript approach and this did it for me.
Note: I encountered the problem in a custom theme I'm developing on WordPress.