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

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:

    
    
This is the caption.