Can a figcaption be restricted to the width of a responsively sized image?

Question

Say I have the following HTML:

<figure>
<img alt="Sun" src="sun.gif" width="256" height="256" />
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</figure>

If I want the text to wrap to the width of the image, I need this CSS:

figure {
    display: table;
    width: 1px;
}

If I want the image to be "responsive" — that is, be no bigger than the viewport — I need this CSS too:

img {
    max-width: 100%;
}

But combining these two results in a terrible mess! Now that the img's parent has an explicit width set, the max-width causes the whole figure to be really, really tiny (although not quite 1px).

So is it possible to use CSS (2 or 3) to achieve both an image caption wrapped to no wider than the image, and an image no wider than the viewport?

Answer 1

I came across the same issue and was able to come up with a fairly neat solution, inspired by this.

HTML:

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>​

CSS:

figure {
   display: table;
   padding: 5px;
   background-color: #fff;
   font-size: .875em;
   
}

figure img {
   display: block;
   max-width: 100%;
}

figcaption {
   display: table-caption;
   caption-side: bottom;
   background: #fff;
   padding: 0 5px 5px;
}​

This ensures the figcaption does not exceed the width of the figure, whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+.

The figure's width will be whatever the native width of the image is, unless that width is restricted in some other way.

Answer 2

So is it possible to use CSS (2 or 3) to achieve both an image caption wrapped to no wider than the image, and an image no wider than the viewport?

Yes. Just use viewport units on the img - max-width: 100vw; instead of % - max-width: 100%;

DEMO

Just for completeness:

There are 2 other techniques to get the text to wrap to the width of the image:

1) Set display: table-caption; on the figcaption

DEMO

2) Set width: min-content on the figure

DEMO