Image caption width to same as image

Question

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>

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?

Answer 1

If the problem is the caption being too long, you can always use

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

And the caption will stay static. Also, the tag name is img, not image.

Or, if you want to detect your image width, you can use jQuery:

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

That way, you're getting the image width, then you set the caption width to it.

Answer 2

You could try to set the image div wrapper display:inline-block

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

If the caption is long, the only solution will be to set a fixed width, or set the .image div width by js. I'm trying to think about a pure css solution, but I think it's an hard challenge :)

Answer 3

You can apply display:table; and an arbitrary initial width, eg. width:7px; to the parent block like figure and everything will work as expected!

Here is a live demo: http://jsfiddle.net/blaker/8snwd/

This solution's limitation is that IE 7 and earlier do not support display:table; and IE 8 requires your doctype to be !DOCTYPE.

Sources:

• http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
• W3Schools (can't post link due to stackoverflow's 2-link limit for people with less than 10 rep)

Answer 4

The key is to treat the image as having a certain width some length. In the example below I checked and my image was 200px wide. And then treat the caption as an inline-block.

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

You can also replace the inline-block with text that is left justified, right, or stretched over the exact image width by replacing above css with one of the following:

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

Answer 5

The only way to do captioning properly is to enclose the image and caption in a table constructed from span elements with table, table-row and table-cell css attributes.

Any other method (including HTML5 figure tags) either gives width mismatches or causes unwanted line breaks.

If your method must work in a non-css3 browser, then a table is probably the best bet.

Answer 6

Expanding on the above, I use this jQuery snippet to examine all images in my code that have captions, and set the caption width to match the width of the previous image. So if the HTML is like:

<img src="blah" /><figcaption>this is the first caption</figcaption>
<img src="blah2" /><figcaption>this is the second caption</figcaption>

then use this jQuery:

$("figcaption").each(function () { 
    $(this).css("width", $(this).prev("img").width()) 
});

Answer 7

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.

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>