Hey Mick, This should do it I believe... [code] >-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Fit caption to bottom of image of unknown width in a responsive layout</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> <!-- /*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margi n:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { text-align: center;} img { width: auto; /* IE */ height: auto; max-width: 100%; max-height: 100%; vertical-align: middle; /* Remove the gap between images and the bottom of their containers. */ -ms-interpolation-mode: bicubic; } figure { width: auto; height: auto; max-width: 100%; max-height: 100%; background: #eee; border: 1px solid #ccc; margin: 20px auto; padding: 0px; display: inline-block; } .figureIMG { margin: 0px; padding: 0px; display: block; } figcaption { width: 100%; /* IE */ height: 100%; text-align: left; background: #ddd; margin: 0px; padding: 10px; } --> </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js";></script> </head> <body> <figure> <img class="figureIMG" src="600px-CMB_Timeline300_no_WMAP.jpg" alt=""> <figcaption> </figcaption> </figure> <script type="text/javascript"> var $wrapper = $(document).find("figure"); var $img = $($wrapper).children(".figureIMG"); var newString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in mauris nunc. Vivamus dictum dapibus egestas. Maecenas id rutrum elit."; $($wrapper).ready( function() { $($img).one('load', function() { $($wrapper).children("figcaption").css("max-width", $($img).width()+"px").html( newString ); }).each(function() { if(this.complete) $(this).load(); }); }); </script> </body> </html> --------------------< [end code] Here is a live example. Tested in Safari, Firefox and Chrome. http://designdrumm.com/responsive_caption.html HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jul 18, 2013, at 10:58 PM, Micky Hulse wrote: > Hi Karl! Thanks for the help! Much appreciated. :) > > On Thu, Jul 18, 2013 at 8:35 PM, Karl DeSaulniers <k...@designdrumm.com> > wrote: >> Firefox and Safari on my machine are doing the same thing here. FYI. >> Although the one on the bottom does not have the same text in it so it is >> kind of hard to tell if it is working. >> The text on the bottom doesn't pass the width of the image. > > Ah, good observation! I totally missed that. Here's a version where > the text is the same for both examples: > > <http://jsbin.com/eruxew/4> > > Sorry about the inconstancy. > > On Thu, Jul 18, 2013 at 8:45 PM, Karl DeSaulniers <k...@designdrumm.com> > wrote: >> Actually correction, I thought you were talking about the width of the text >> below matching the image, I see now your talking about the responsive image >> sizing. > > No worries at all! I really appreciate the feedback, it's all very helpful. :) > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
