图片字幕宽度与图片相同 [英] Image caption width to same as image

问题描述

如何使图片标题宽度与图片一致？现在我有以下代码：

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>

我已经尝试了很多东西（浮动，绝对定位等），但如果标题是长，它总是使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?

推荐答案

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

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.

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

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:

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

这篇关于图片字幕宽度与图片相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！