Html 如何使 <figcaption> 的宽度与其 <figure> 标签内的 <img> 的宽度相匹配？

How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

提问by rkhff

Say, I got this code:

说，我得到了这个代码：

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

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

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

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

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

采纳答案by robertc

This will place the figcaptionside by side with the img:

这将与figcaption并排放置img：

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

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figureto stay at 200px width, but then you comment that you want the figcaptionto appear to the right, which would make the figurewider. If all you want is for the figcaptionto be restricted to the width of the image, this should work:

这是一个例子。但是，我并不完全清楚您要实现的目标 - 您在问题中说您希望figure保持在 200 像素的宽度，但随后您评论说您希望figcaption出现在右侧，这会使figure宽度变宽。如果您想要的只是figcaption限制图像的宽度，这应该有效：

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

回答by Marco Rohner

Adding this Code to <figure>and <figcaption>CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

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

figure { display: table; }


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

1. Adding display: table;sets the stage.

2. Adding display: table-caption;alone placed the caption on top of the image, The caption-sideproperty specifies the placement of the table caption at the bottom, topis default.

1. 添加display: table;设置了舞台。

2. display: table-caption;单独添加将标题放置在图像顶部，该caption-side属性指定表格标题在 的位置bottom，top为默认值。

回答by Danield

Another solution: Use Intrinsic width

另一种解决方案：使用固有宽度

Just set width: min-content;on the figureelement

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

DEMO(Except for IE)

演示（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>

NB:Browser Support is OK, except for IE, however they are considering implementing this

注意：浏览器支持是可以的，除了 IE，但是他们正在考虑实现这个

回答by Michael McGinnis

Unfortunately, setting the width of the figure instead of using max-width: 100%means that it won't shrink on narrow (mobile) devices. That is, the images will not be responsive. I resorted to inserting <br />to break up long captions, but I didn't like it. But this obscure CSS feature seems to work for me:

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

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

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

This keeps the image responsive, even though the caption isn't. You can pick your own caption width. I also added margin: auto; text-align: center;to center the caption on a mobile device.

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

回答by Rich Wertz

This was really bothering me, because I wanted to find an answer to accommodate an upgrade to HTML5 that would successfully replace my original setup of displaying images and captions- a table with two rows (or one if no caption was available).

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

My solution might not work for everyone, but so far, it seems to do just fine in the major browsers (O, FF, IE, S, C), as well as being responsive on mobile devices:

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

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

The idea here is that figureis pushed into existence by the width of the imgand so doesn't need any kind of direction.

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

figure img {
display: block;
}

This is used to rid ourselves of the useless, unsightly gap between the bottom of imgand the bottom of figure.

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

figcaption {
text-align: left;
}

Now that figure has been pushed open just wide enough to let imgin, figcaptiontext has only that limited amount of space in which to exist. text-alignis not required for this solution to function.

现在这个数字已经被推开到刚好可以放进img去，figcaption文本只有有限的空间可以存在。text-align不需要此解决方案的功能。

This solution works as well as display: table-caption, but keeps figcaptioncontained in any border or background value that might need to be set.

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