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

csshtmlimage

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;
}

Best Answer

Add display:table to figure css like this

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

JS Fiddle Demo

Related Topic