是否有更好的方法将图形元素限制为包含图像的大小答案

【问题标题】：Is there a better way to constrain a figure element to the size of the contained image是否有更好的方法将图形元素限制为包含图像的大小
【发布时间】：2012-10-31 19:38:05
【问题描述】：

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

<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/

【问题讨论】：

前几天我自己也在考虑这个问题，<figure> 和 <figcaption> 的布局很尴尬。
stackoverflow.com/questions/617386/…的可能重复

标签： css html figure

【解决方案1】：

不要让世界复杂化！简单地说，使标题出现在鼠标悬停上。此外，您还可以让一小部分标题默认显示，然后在鼠标悬停或悬停时将其余部分显示为工具提示。

【讨论】：

是的，这是个好主意，但不是客户想要的。
@Sorcy 对我来说，这里的客户是提出问题的人，而他认为最终产品是愚蠢的！所以我建议他。

【解决方案2】：

添加

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

到您的 css [按照建议 here ]，您就完成了。

【讨论】：