How To Match Text Width To Image Without Specifying Exact Widths?

I have this HTML: The text is placed underneath the image. Now I want the text to be the same width as the image, but I do not want to specify an exact width since the images are

Solution 1:

You would need javascript to do this if the images aren't a set width.

Personally, I would do something like the following.

HTML

<article><imgsrc="image.jpg"class="image" /><p> Text </p></article>

JS -- jquery

$("article").each(function(i, obj) {
    var imgWitdh = $(obj).find(".image").width();
    $(obj).find("p").width(imgWidth);
});

Solution 2:

I found a CSS only solution. This might not work in all browsers yet, but certainly seems to work in the major ones.

article {
  width: -moz-min-content;  /* Firefox/Gecko */width: -webkit-min-content;   /* Webkit */width: min-content;
}

See fiddle: http://jsfiddle.net/U2Vxr/

And a full article on the matter: http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent