如何使 <figcaption> 的宽度与其 <figure> 标记内的 <img> 的宽度匹配？答案

【问题标题】：How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?如何使 <figcaption> 的宽度与其 <figure> 标记内的 <img> 的宽度匹配？
【发布时间】：2011-09-25 22:37:00
【问题描述】：

说，我得到了这个代码：

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

如果我不使用任何 CSS，figcaption 会将图形元素的宽度扩大到 200 像素以上。我怎样才能防止这种情况发生？

我知道我可以通过指定图形元素的宽度 (<figure style="width:200px;">) 来强制 figcaption 中的文本换行，但我真的不想对每张图片都使用它。

【问题讨论】：

这是一个非常好的问题。欢迎使用 Stack Overflow！
谢谢。为了扩展这个问题，我想要做的是在图像右侧浮动一个 figcaption：figure { display: block; border: 1px solid #333; } figure img { float: left; } figcaption { float: left; padding: 4px; } 如果 figcaption 中的文本太长，则元素被包裹在图像下方。同样的问题，但方式略有不同。另一个问题是，当 figcaption 浮动时，图形元素会塌陷。在 figcaption 之后添加 <br clear /> 是否有 CSS 替代方案？
我不确定我是否理解 - 您是否希望 figcaption 与图像的宽度相同，但不在图像下方？
啊，所以我实际上错误地重新陈述了这个问题，至少就您的实际问题而言。
使用max-content 而不是min-content。

标签： css html

【解决方案1】：

将此代码添加到 <figure> 和 <figcaption> CSS-Attributes 帮助我解决了同样的问题。此外，它还保留了图像和标题的响应能力。

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }

添加display: table; 设置舞台。
单独添加 display: table-caption; 会将标题放在图像，caption-side 属性指定 bottom、top 处的表格标题是默认的。

【讨论】：

我喜欢这样。一旦你从 HTML 中删除宽度和高度，你可以通过在 Marco 的解决方案或 robertc 的第二个解决方案（table-row）中添加 figure img { width: 100%} 来使图像具有响应性。
谢谢。这个对我有用。最流行的解决方案弄乱了我要去的树脚本（使用表格），我可以修复，但后来我注意到它在 iPhone 4 上搞砸了（不知道任何其他手机），我没有不知道如何解决。但是这个解决方案没有任何问题。
我无法让此解决方案与figure img { width: 100%} 或img { max-width: 100%; height: auto !important; } 或jsfiddle.net/jwilson3/9y13rsgy 的组合一起响应地工作
Marco 的建议是天才。我在网上阅读过，并尝试了许多策略和变体。如此多的对齐机制，如此多的用例，但奇怪的是，这是第一次提到“刚刚工作”的简单、标准化的解决方案。奇怪，因为这似乎是一种相对普遍的需求；或者可能不是？（我需要将图像在视口中垂直和水平居中，并在其下方带有标题，在所有屏幕上都响应）无论如何，谢谢伙计！
谢谢。也可以使用display: inline-table 在屏幕上放置一排数字。

【解决方案2】：

这会将figcaption 与img 并排放置：

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Here's an example。但是，我并不完全清楚您要实现的目标-您在问题中说您希望figure 保持在 200px 宽度，但随后您评论说您希望 figcaption 出现在右侧，这将使figure 更宽。如果您只想将figcaption 限制为图像的宽度，this should work：

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}

【讨论】：

感谢一百万，已排序。对我的评论造成的混乱表示歉意，我有点得意忘形，并意识到这两个问题完全不同（尽管两者都通过 display:table / table-cell / table-row 解决）。
这种方法可能存在问题 - 当我使用它时，我的图像在 IE 上消失了。
@AndFinally 什么版本的 IE？
robertc，以为是ie7，ie9的ie8模式，还有ie9。从那以后，我发现这个更简单的 css 适用于除 ie7 之外的所有应用程序。对于该浏览器，我可能必须使用 jquery 将图形调整为图像宽度。图{显示：表格；宽度：100px； } .ie7 图 { 显示：块；宽度：自动； }
@AndFinally 好的，谢谢 - 我主要使用 Linux，所以我无法在 IE 中测试东西。然而，由于它似乎在所有其他浏览器中都可以工作，这可能是一个 IE 错误。

【解决方案3】：

另一种解决方案：使用Intrinsic width

只需在figure 元素上设置width: min-content;

DEMO（IE除外）

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

<figure>
  <img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

注意：Browser Support is OK，除了 IE，但是they are considering implementing this

【讨论】：

这应该是第一个答案。这是最优雅、最正确的解决方案，使用 Modernizr 可以很容易地在 IE 中以不同的方式解决问题。
这几乎是一个完美的解决方案，只是它根本不适用于响应式图像。要查看此中断，您只需将img { max-width: 100%; height: auto !important; } 添加到演示小提琴中，如下所示：jsfiddle.net/jwilson3/ta17f9Lh
@JamesWilson 这可以使用figure { max-width: 100%; } figure > img { max-width: none; } 之类的东西来解决。
@Archagon 不确定这有什么帮助。它会导致图像停止响应...jsfiddle.net/jwilson3/Lhrjew6v 希望有一个工作示例。
但是如果标题更窄，这也会缩小图像吗？

【解决方案4】：

不幸的是，设置图形的宽度而不是使用max-width: 100% 意味着它不会在窄（移动）设备上缩小。也就是说，图像不会是responsive。我求助于插入<br /> 来分解长标题，但我不喜欢它。但这个不起眼的 CSS 功能似乎对我有用：

figcaption { display: run-in; width: 150px }

即使标题没有响应，这也会使图像保持响应。您可以选择自己的标题宽度。我还添加了margin: auto; text-align: center; 以使标题在移动设备上居中。

【讨论】：

【解决方案5】：

这真的让我很困扰，因为我想找到一个答案来适应 HTML5 的升级，这将成功取代我原来显示图像和标题的设置——一个有两行的表格（如果没有可用的标题，则为一个）。

我的解决方案可能不适用于所有人，但到目前为止，它似乎在主流浏览器（O、FF、IE、S、C）中运行良好，并且在移动设备上响应良好：

figure {
border: 0px solid #000;
display: table;
width: 0;
}

这里的想法是figure 被img 的宽度推入存在，因此不需要任何方向。

figure img {
display: block;
}

这是用来摆脱img底部和figure底部之间无用的、难看的间隙。

figcaption {
text-align: left;
}

现在这个数字已经被推开到足以让img 进入，figcaption 文本只有有限的空间可以存在。此解决方案不需要text-align 即可运行。

此解决方案与display: table-caption 一样有效，但将figcaption 包含在可能需要设置的任何边框或背景值中。

【讨论】：