html - 图片标题宽度与图片相同

Question

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

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

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

Answer 1

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

就我而言，我应用display:table在父元素上，并应用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>

Answer 2

您可以应用display:table;任意初始宽度，例如。width:7px;像父块一样figure，一切都会按预期工作！

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

此解决方案的限制是 IE 7 及更早版本不支持display:table;，并且 IE 8 要求您的文档类型为!DOCTYPE.

资料来源：

• http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
• W3Schools（由于 stackoverflow 对少于 10 个代表的人的 2 链接限制，无法发布链接）

Answer 3

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

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

并且标题将保持不变。此外，标签名称是 img，而不是 image。

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

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

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

Answer 4

正确添加字幕的唯一方法是将图像和字幕包含在一个表格中，该表格由具有 table、table-row 和 table-cell css 属性的span元素构成。

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

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

Answer 5

您可以尝试设置图像 div 包装器display:inline-block

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

如果标题很长，唯一的办法就是设置一个固定的宽度，或者通过js设置.image div的宽度。我正在尝试考虑一个纯 css 解决方案，但我认为这是一个艰巨的挑战 :)

Answer 6

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

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：

.caption {
   display: inline-block;
}

您还可以将 inline-block 替换为左对齐、右对齐或拉伸到确切图像宽度的文本，方法是将上面的 css 替换为以下内容之一：

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