Make Responsive Images & Captions Work Together

[ASIMandy]

Hi,

Searched all over for this one and I’m beginning to think it’s impossible!

I have a wordpress website where I post randomly sized images (they’re rarely the same size as the previous image) in blog posts, with the content text wrapping around it. I float the images left.

The problem is, that if the caption of the image is wider than the image it doesn’t break onto the next line, and instead makes the whole div much wider messing up the way the text fits around the image. The only way I can think to do this is to set a max-width on the container div, however I don’t want to do that. Is there any way to do this without Javascript?

Thanks a ton in advance.

Andy

[Paulie_D]

Need to see the HTML involved.

If you’re using captions then, ideally, you should be using the figure and ficaption elements.

<figure>
    <img src=" etc" />
    <figcaption> My Caption</figcaption>
</figure>

[ASIMandy]

Hi,

Thanks for the response. I wasn’t using figure and figcaption elements. I’ve just had a play around with them in codepen and I can’t seem to control the width of the img within the figure though??

Here is my code. I want the caption to break onto the next line when it’s as wide as the image, but I’m not able to say how wide the image is.

http://codepen.io/anon/pen/QbWWZg

[Paulie_D]

Simple answer..you can’t exactly.

You need to have some width limitation that would cause the text to break….and that would apply to whatever element you are using, be it a figure / figcaption or whatever.

I get that you want the images to be a as big as possible so the only solution I can come up with is to use the figure/figcaption and position the figcaption absolutely on top of the image.

This will allow you to set the width to be no more that 100% width of the figure and the width of that can be set by the image.

http://codepen.io/Paulie-D/pen/mJddGJ

[Author]

Posts