Question

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

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

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

Answer 1

所以问题是你不知道img会有多宽，而且img的标题可能会超过img的宽度，在这种情况下你想要将标题的宽度限制为宽度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为!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，而不是图像。

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


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

这样，你得到的图像宽度，然后你设置标题宽度。

Answer 4

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

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

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

Answer 5

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

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

如果标题很长，唯一的解决方案是设置固定宽度，或者将.image div宽度设置为js。我正在考虑一个纯粹的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;
}

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

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

图像标题宽度与图像相同

6 个答案: