如何使的宽度与标签内的的宽度相匹配？

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会将图元素的宽度扩展到200px以上。我怎么能阻止这个？

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.

我知道我可以通过指定图元素的宽度（

）来强制figcaption中的文本换行，但我真的不想对每个图像使用它。

5 个解决方案

#1

This will place the figcaption side 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 figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

这是一个例子。然而，我并不完全清楚你想要实现的目标 - 你在问题中说你希望数字保持在200px宽度，但是你评论你想让figcaption出现在右边，这将使数字更广。如果你想要的只是将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;
}

#2

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.

将此代码添加到

和

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-side property specifies the placement of the table caption at the bottom, top is default.

   添加显示：table-caption;单独将标题放在图像顶部，标题侧属性指定表格标题在底部的位置，顶部是默认值。

#3

Another solution: Use Intrinsic width

Just set width: min-content; on the figure element

只需设置宽度：min-content;在图元素上

DEMO (Except for 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，但他们正在考虑实现这一点

#4

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％意味着它不会在窄（移动）设备上缩小。也就是说，图像不会响应。我使用插入
分解长字幕，但我不喜欢它。但这个不起眼的CSS功能似乎对我有用：

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

figcaption {display：run-in;宽度：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.

即使字幕不是，这也可以保持图像的响应性。您可以选择自己的标题宽度。我还添加了保证金：auto; text-align：center;将标题置于移动设备上。

#5

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 figure is pushed into existence by the width of the img and so doesn't need any kind of direction.

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

figure img {
display: block;
}

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

这用于摆脱img底部和图底部之间无用的，难看的间隙。

figcaption {
text-align: left;
}

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

现在这个数字被推得足够大以至于让img进入，figcaption文本只有有限的空间存在。此解决方案不需要text-align。

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

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