Image caption width to same as image

Question

How can I make image caption width same as image? Now I have the following code:

    
    &         


        
      

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.