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?

**Related:** [Fit
tightly around enclosed image?](http://stackoverflow.com/q/7178537/1497596) — DavidRR, Sep 16 '14 at 12:43
All css, no catches: https://stackoverflow.com/questions/6523560/image-captions-and-wrapping — Thomas Maier, Sep 17 '17 at 13:53

score 41 · Answer 1 · answered Oct 01 '13 at 09:49

41

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>

answered Oct 01 '13 at 09:49

Cafe Coder

944
9
14

1

Just finishing this up, here. There is an all-working css-only solution: https://stackoverflow.com/questions/6523560/image-captions-and-wrapping – Thomas Maier Sep 17 '17 at 13:52
1

It seems it only works when the img width is its actual width. – Ben P.P. Tung May 07 '18 at 15:08

score 6 · Answer 2 · answered Aug 10 '12 at 19:15

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)

Finally, an advantage to the fact that tables don't respect given widths and instead, respond to content! — allicarn, Feb 13 '14 at 15:24

score 2 · Answer 3 · answered Feb 12 '11 at 17:47

2

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.

answered Feb 12 '11 at 17:47

AeroCross

3,969
3
23
30

Is this possible without JavaScript? – Ville Feb 12 '11 at 18:44
@Ville Detect the image width? I'm pretty sure that you can't. The first piece of code is CSS-only, though. – AeroCross Feb 12 '11 at 19:01

score 1 · Answer 4 · answered Jul 04 '15 at 20:33

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.

score -1 · Answer 5 · answered Nov 03 '14 at 22:54

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

The image width may vary depending on the image. Say you are rendering many images of all different sizes, then just hardcoding the width at 200px doesn't work. — dwoodwardgb, Oct 05 '18 at 15:26

stecb · Answer 6 · 2011-02-12T19:08:25.703

-1

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 :)

edited Feb 12 '11 at 19:08

answered Feb 12 '11 at 19:00

stecb

14,478
2
50
68

Such a simple task being a hard-challenge shows what is wrong with CSS for layout (as opposed to just styling). We trade tables for something equally brain-damaged. And flexbox is not implemented yet... – Hejazzman Feb 12 '12 at 02:34
jsfiddle is not existing anymore – martpie Apr 20 '17 at 15:26

Image caption width to same as image

6 Answers6

Linked