有没有更好的方法将图形元素限制为所包含图像的大小

Question

我有带有标题的图像，如下所示：

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/280/375">
    <figcaption>A Caption for this image</figcaption>
</figure>

类"imageBoxShadow"在图像周围放了一个boxShadow（谁能猜到？）。我把它放在数字上，因为标题应该在边框内。只要标题较小，则图像较宽即可正常工作。

但是，如果我有一个小图像和/或长标题，标题将尽可能扩展图形元素，这看起来很愚蠢。

当然，我可以通过添加硬编码样式来设置宽度来限制图形元素：

<figure class="imageBoxShadow" style="width: 100px">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>

但这在CMS上下文中感觉很愚蠢并且不是很方便。

有没有更好的方法可以做到这一点？

有一个jsFiddle链接来检查它：http://jsfiddle.net/Sorcy/h5sNB/

Answer 1

add

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

到你的 CSS [如此处建议] 你就完成了。

Answer 2

不要让世界复杂化！只需将标题显示在鼠标悬停上即可。此外，您还可以使标题的一小部分默认显示，然后将鼠标悬停在或悬停的其余部分显示为工具提示。