如何在不指定精确宽度的情况下将文本宽度与图像匹配？

Question

我有这个HTML：

<article>
  <img src="image.jpg">
  <p> Text </p>
</article>

文本放在图像下方。现在我希望文本与图像的宽度相同，但我不想指定精确的宽度，因为图像的宽度不同（文章也是如此）。

如何使文本宽度对应图像宽度，即。在没有指定确切宽度的情况下使其在正确的时间中断？

Answer 1

我发现了一个仅限CSS的解决方案这可能不适用于所有浏览器，但肯定似乎适用于主要的浏览器。

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

见小提琴：http://jsfiddle.net/U2Vxr/

关于此事的完整文章：http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Answer 2

如果图像不是设置宽度，则需要javascript才能执行此操作。

就个人而言，我会做类似以下的事情。

HTML

 <article>
 <img src="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);
});