Question

I hit a need to auto shrink my text wrapper width below image.

for example:

<figure>
    <img src="mypicture.jpg" />
    <figcaption>
        This is a long description.This is a long description.This is a long description.
    </figcaption>
</figure>

Now I want to have a border around img and figcaption, because I have lots of images with different width. So I want to auto shrink the figcaption width to fit the image’s width. That is if I have a image with width 100px, then I want my figcaption 100px too.

Can you tell me if I can do this without js, just use pure html and css?

Answer 1

It does need some tricks.
You can set the container display to table and give it a small width. It will auto align its content width (like a table).

Here is a example