1

In a responsive design, how can the width of a <figcaption> be made to adjust according to the width of the <img>, but not exceed it?

 <section>    
    <figure>
        <img src="link.jpg">
        <figcaption>Caption</figcaption>
    </figure>
</section>

The corresponding CSS only limits the <img> and not the <figcaption>, see:

enter image description here

How can the <figcaption> be constrained along with the <img>, without using max-width: 200px (or 12.5em) on the <figure> container?


Here are the important bits of CSS (full on JSFiddle):

section figure {
    position: relative;
    margin: 0 auto; /* to center it */
}

section figure img {
    max-width: 100%;
    vertical-align: middle; /* to make sure images behave like blocks */
}

section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
}
Baumr
  • 6,124
  • 14
  • 37
  • 63
  • Can you post your CSS please. – Lowkase Dec 04 '12 at 14:54
  • @Lokase, there was a JSFiddle link, but I've included the relevant CSS into the question as well (as per StackOverflow guidelines) – Baumr Dec 04 '12 at 14:59
  • Thanks Baumr, didn't see the jsFiddle link on the first read through. Is a javascript/jQuery solution out of the question? Or do you only want to have a CSS solution? – Lowkase Dec 04 '12 at 15:01
  • Yeah, looking for a nice, simple cross-browser friendly CSS solution – Baumr Dec 04 '12 at 15:12

1 Answers1

3

Setting max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) or float: [left|right] (http://jsfiddle.net/cdmU3/1/) on the section would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.

Alternatively, try setting width: 100%; height: auto; on the img, and set the width on the figure element? http://jsfiddle.net/9yUsP/

(setting height: auto; on the img means it's retain it's aspect ratio regardless of height or width attributes set on the img element itself)

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • I updated your fiddle, setting `width: 100%; height: auto;` on the `img`, and putting a `max-width` on the figure. Seems to work, except the caption escapes when the window gets tiny (due to absolute positioning): http://jsfiddle.net/9yUsP/ – Olly Hodgson Dec 04 '12 at 15:18
  • Thank you. I was looking for a method that'll avoid setting `max-width: 200px` (will work without the other changes you've made) — should I edit my question to emphasize? Thanks – Baumr Dec 04 '12 at 15:24
  • 1
    Doesn't setting `figure { display: inline-block; max-width: 100%; }` and `figure img { max-width: 100%; }` achieve that? e.g. http://jsfiddle.net/vZpmq/1/ – Olly Hodgson Dec 04 '12 at 15:32
  • Thanks! Floating left will un-center it (and will need a clearfix hack), inline-block actually works now (weird, apologies), but has issues with older browsers, and it'll need an additional container element taking away from semantics — wondering what's best... – Baumr Dec 04 '12 at 15:38
  • 1
    At this point you're running into the limitations of CSS :( Do you really need a container? Adding a `
    ` around the outside won't affect semantics though; it literally doesn't mean anything (as I understand it). For IE6/7 add `zoom: 1;` to make `inline-block` work.
     – Olly Hodgson Dec 04 '12 at 15:40
  • From what I understand, I'd have to use a browser-specific hack and set: `display: inline; zoom: 1;` for IE? – Baumr Dec 04 '12 at 15:46
  • Correct. Conditional comments are the best way IMO, see: https://github.com/h5bp/html5-boilerplate/blob/master/index.html – Olly Hodgson Dec 04 '12 at 15:47
  • Ah, and it'll need a container in order to make it not show inline with text as it does in your JSFiddle. – Baumr Dec 04 '12 at 15:50
  • Yes, or else place it after a block-level element (i.e. anything with `display: block;`). – Olly Hodgson Dec 04 '12 at 15:55
  • Found another problem, if [this is how IE6/7 will see it](http://jsfiddle.net/vZpmq/4/), then that's not great :P – Baumr Dec 04 '12 at 16:00
  • 1
    I've tried it in IE7 compat mode (don't have a real IE7 to hand) and it looks fine (when I add the latest HTML5Shiv): http://jsfiddle.net/WDj4Y/ – Olly Hodgson Dec 04 '12 at 16:06
  • Ah, OK, thanks! I'll check that later on IE7/6. But I'm still wondering, then **maybe the `max-width: pixel value here` is the best/cleanest solution?** Despite each image width needing a specific `max-width`... – Baumr Dec 04 '12 at 16:09
  • Whichever solution is easiest for the user adding the content to the site, IMO. – Olly Hodgson Dec 04 '12 at 16:24