使标题占据图像的宽度

Question

考虑以下示例：

<figure>
<img height="100px" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png">
<figcaption>Very long caption that should take the width of the image</figcaption>
</figure>
<div>This text should appear below the whole figure</div>

有没有一种只使用css的方法可以使标题采用大多数浏览器都能使用的图像宽度，所以没有请不要出血边css？

EDIT：一个没有内在宽度(最小内容(的解决方案。

编辑：我在图下面添加了文字，也应该在标题下面。

Answer 1

更新的代码https://jsfiddle.net/harshapache/sLeab4zg/

figure {
position: relative;
display: table-caption;
}

Answer 2

figure{
display: table;
width: 1px;
}