html - 将 html 图形宽度设置为其包含的图像宽度相同

Question

当图形标签内有图像时，图形宽度为 100%。如何使图形始终与图像具有相同的宽度？这是我当前的代码:

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

像这样将display:table添加到figure css

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

JS Fiddle Demo