图像标题宽度与图像相同

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在caption元素上应用,如下所示:

<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，而不是image。

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

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

这样，您就可以获得图像宽度，然后为其设置标题宽度。