Is there a better way to constrain a figure element to the size of the contained image

Question

I have images with captions, like so:

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/280/375">
    <figcaption>A Caption for this image</figcaption>
</figure>

The class "imageBoxShadow" puts a boxShadow (who'd have guessed?) around the image. I put it on the figure, because the caption is supposed to go inside the border. Which works fine as long as the caption is smaller then the image is wide.

However, if I have a small Image and/or a long caption the caption will extend the figure element as far as possible, which looks stupid.

Of course I could restrain the figure element by adding a hardcoded style to set the width:

<figure class="imageBoxShadow" style="width: 100px">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>

but that feels stupid and not very convenient in a CMS-context.

Is there a better way to do this?

Have a jsFiddle link to check it out: http://jsfiddle.net/Sorcy/h5sNB/

I was thinking about this myself the other day, it’s an awkward layout issue with `
` and `
`. — Paul D. Waite, Nov 12 '12 at 11:27
Possible duplicate of http://stackoverflow.com/questions/617386/limit-text-to-the-width-of-sibling-image-auto-width-in-css — TonioElGringo, Nov 12 '12 at 11:38

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

add

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

to your css [as proposed here ] and you're done.

edited May 23 '17 at 10:24

Community

1
1

answered Nov 12 '12 at 11:43

Danield

121,619
37
226
255

score 0 · Answer 2 · answered Nov 12 '12 at 11:33

0

Don't complicate the world! Simply, make the caption to be appeared on mouse over. In addition you are able to make a little portion of the caption to be appeared by default, then onmouseover or hover the rest of it is appeared as a tooltip.

answered Nov 12 '12 at 11:33

SaidbakR

13,303
20
101
195

Yeah, it's a nice idea but not what the customer wants. – Sorcy Nov 12 '12 at 12:07
@Sorcy For me, the customer here is who ask the question, while he regards the final product as stupid! so I advised him. – SaidbakR Nov 12 '12 at 12:10

Is there a better way to constrain a figure element to the size of the contained image

2 Answers2