图像标题宽度与图像相同

How can I make image caption width same as image? Now I have the following code:

如何使图像标题宽度与图像相同？现在我有以下代码：

<div class="image">
    <img src="foo.jpg" alt="" />
    <div>This is the caption.</div>
</div>

I've tried a lot of things (floating, absolute positioning etc), but if the caption is long, it always makes the div wide instead of going on many lines. The problem is that I don't know the width of image (or the length of caption). Is the only way to solve this use tables?

我已经尝试了很多东西（浮动，绝对定位等），但如果标题很长，它总是使div宽而不是多行。问题是我不知道图像的宽度（或标题的长度）。是解决这个使用表的唯一方法吗？

6 个解决方案

#1

So the problem is that you don't know how wide the img will be, and the caption for the img may exceed the width of the img, in which case you want to restrict the width of the caption to the width of the img.

所以问题是你不知道img有多宽，而且img的标题可能会超过img的宽度，在这种情况下你想要将标题的宽度限制为img的宽度。

In my case, I applied display:table on the parent element, and applied display:table-caption and caption-side:bottom on the caption element like this:

在我的例子中，我在父元素上应用了display：table，并在caption元素上应用了display：table-caption和caption-side：bottom，如下所示：

<div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>

#2

You can apply display:table; and an arbitrary initial width, eg. width:7px; to the parent block like figure and everything will work as expected!

你可以申请display：table;和任意的初始宽度，例如。宽度：7px的;像图中的父块一样，一切都会按预期工作！

Here is a live demo: http://jsfiddle.net/blaker/8snwd/

这是一个现场演示：http：//jsfiddle.net/blaker/8snwd/

This solution's limitation is that IE 7 and earlier do not support display:table; and IE 8 requires your doctype to be !DOCTYPE.

该解决方案的局限性在于IE 7及更早版本不支持display：table;和IE 8需要你的doctype！DOCTYPE。

Sources:

资料来源：

http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
W3Schools (can't post link due to *'s 2-link limit for people with less than 10 rep)
W3Schools（由于*对少于10个代表的人的2个链接限制而无法发布链接）

#3

If the problem is the caption being too long, you can always use

如果问题是标题太长，您可以随时使用


div.image {
    width: 200px; /* the width you want */
    max-width: 200px; /* same as above */ 
}
div.image div {
    width: 100%;
}

And the caption will stay static. Also, the tag name is img, not image.

标题将保持不变。此外，标签名称是img，而不是图像。

Or, if you want to detect your image width, you can use jQuery:

或者，如果要检测图像宽度，可以使用jQuery：


$(document).ready(function() {
    var imgWidth = $('.image img').width();
    $('.image div').css({width: imgWidth});
});

That way, you're getting the image width, then you set the caption width to it.

这样，您获得图像宽度，然后将标题宽度设置为它。

#4

The key is to treat the image as having a certain width some length. In the example below I checked and my image was 200px wide. And then treat the caption as an inline-block.

关键是将图像视为具有一定长度的特定宽度。在下面的示例中，我检查了我的图像是200px宽。然后将标题视为内联块。

HTML:

HTML：

<div style="width:200px;">
   <img src="anImage.png" alt="Image description"/>
   <div class="caption">This can be as long as you want.</div>
</div>

CSS:

CSS：

.caption {
   display: inline-block;
}

You can also replace the inline-block with text that is left justified, right, or stretched over the exact image width by replacing above css with one of the following:

您还可以使用以下其中一项替换上面的css，将内联块替换为左对齐，右对齐或拉伸超过精确图像宽度的文本：

.caption {
   /* text-align: left; */
   /* text-align: right; */
   text-align: justify;
}

#5

The only way to do captioning properly is to enclose the image and caption in a table constructed from span elements with table, table-row and table-cell css attributes.

正确执行字幕制作的唯一方法是将图像和标题括在一个由span元素构成的表中，该表包含table，table-row和table-cell css属性。

Any other method (including HTML5 figure tags) either gives width mismatches or causes unwanted line breaks.

任何其他方法（包括HTML5图形标记）都会导致宽度不匹配或导致不需要的换行符。

If your method must work in a non-css3 browser, then a table is probably the best bet.

如果您的方法必须在非css3浏览器中工作，那么表可能是最好的选择。

#6

-1

You could try to set the image div wrapper display:inline-block

您可以尝试设置图像div包装器显示：inline-block

http://jsfiddle.net/steweb/98Xvr/

If the caption is long, the only solution will be to set a fixed width, or set the .image div width by js. I'm trying to think about a pure css solution, but I think it's an hard challenge :)

如果标题很长，唯一的解决方案是设置固定宽度，或者将.image div宽度设置为js。我正在考虑一个纯粹的CSS解决方案，但我认为这是一个艰难的挑战:)

#1