图像标题宽度与图像相同

Question

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

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

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

- Ville

---

相关问题：如何紧密地围绕封闭图像适应<div>？ - DavidRR

所有的CSS，没有任何限制：https://dev59.com/0FjUa4cB1Zd3GeqPUL-X - Thomas Maier

Answer 1

所以问题是你不知道图片有多宽，而且图片的标题可能会超出图片的宽度，在这种情况下，你希望限制标题的宽度为图片的宽度。

在我的案例中，我在父元素上应用了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>

- Cafe Coder

---

这里只是结束一下。有一个完全可行的仅使用CSS的解决方案：https://dev59.com/0FjUa4cB1Zd3GeqPUL-X - Thomas Maier

当图片的宽度为其实际宽度时，似乎它才能正常工作。 - Ben P.P. Tung

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个链接的限制，因此无法发布链接）

- Blaker

---

最后，表格不遵循给定宽度而是根据内容响应的优点终于出现了！ - allicarn

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});
});

那样，您可以获取图像宽度，然后将标题宽度设置为相同。

- AeroCross

---

这是否可以在没有JavaScript的情况下实现？ - Ville

@Ville 检测图像宽度？我十分确定你做不到。然而第一段代码只使用了CSS。 - AeroCross

Answer 4

唯一正确的字幕方法是将图像和字幕包含在由span元素构成的表格中，该表格具有表格、表格行和表格单元格css属性。

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

如果您的方法必须在非CSS3浏览器中工作，则表格可能是最佳选择。

- user2137515

Answer 5

关键是将图像视为具有一定宽度和长度。在下面的示例中，我检查了我的图像宽度为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;
}

您还可以通过以下任一CSS样式将inline-block替换为左对齐、右对齐或拉伸到图像宽度：

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

- Rahav

---

图片的宽度可能因图片而异。比如你要渲染许多不同尺寸的图片，那么仅仅将宽度硬编码为200像素是行不通的。 - dwoodwardgb

Answer 6

你可以尝试将图像 div 包装器设置为 display:inline-block。

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

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

- stecb

---

这样一个简单的任务成为了一个艰巨的挑战，这说明CSS在布局方面存在问题（与仅仅进行样式设置不同）。我们用一些同样有缺陷的东西来替代表格。而且flexbox还没有被实现... - Hejazzman

jsfiddle已经不存在了。 - martpie