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

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

添加

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

到你的CSS [建议here ] 就大功告成了。