根据图像大小调整文本大小

Question

我下面有一张图片和一段文字。我正在尝试制作图像文本宽度的最大宽度。 （未定义图像的大小，也未定义父div的大小）

<div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/NYers_celebrate_historic_vote_for_gay_marriage.webm/300px--NYers_celebrate_historic_vote_for_gay_marriage.webm.jpg"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non risus dolor, a euismod leo. Phasellus viverra aliquet felis eget porttitor. Aenean sollicitudin, nulla id ultrices ullamcorper, sem lectus sagittis metus, ut sodales dui nunc id sem. Vestibulum nisl justo, aliquet id luctus eu, tincidunt sit amet diam. Suspendisse at nulla nisl. Duis sed sapien odio, eget commodo metus. Fusce ultricies lectus sit amet massa tristique eu ultricies elit accumsan. Donec mi mi, elementum sit amet faucibus sed, pellentesque sed neque. Pellentesque ut tincidunt dui. Nullam in urna vitae arcu lobortis porta sit amet a sapien. Maecenas at ultricies erat. Maecenas diam arcu, condimentum eu gravida quis, aliquam at nunc. Duis at fermentum orci. Donec porta feugiat purus faucibus euismod. In pretium auctor nulla, blandit dapibus ante auctor at.</p>
</div>

我画了一个快速模型以便更好地理解 -

Codepen - http://codepen.io/anon/pen/kJLrF

有没有办法实现这个？ （不需要这样的标记，如果需要可以添加更多元素）

谢谢你的帮助！

Answer 1

您需要将它们包装在另一个div元素中，设置其max-width属性，然后为图像定义100％宽度，如下所示：

div {
    max-width: 500px;
}

div img {
    width: 100%;
}

请参阅此jsFiddle演示＆gt; http://jsfiddle.net/Vt9CL/

Answer 2

如果你坚持你建造的结构比JS是唯一的选择。

$(init);

function init()
{
  var w = $("img").innerWidth();
  $('p').css({"width": w});
}

http://jsbin.com/ikunix/1/

将图像和段落文本包装在另一个容器中会更好。

Answer 3

我玩了一下，我设法用html和css做到了： HTML：

<div class="container">
   <img src="http://dummyimage.com/300x200/000/fff&text=image" />
   <p>Lorem ipsum [...]</p>
</div>

的CSS：

.container {
   margin: 0 auto;
   width: -moz-min-content;
   width: -webkit-min-content;
}

<强> FIDDLE

问题是它只适用于firefox和chrome。

Answer 4

您可以使用这个小脚本完成此任务：

$('p').css('width',$('img').width() + 'px');

它正在使用width的{​​{1}}，并将其应用于img的{​​{1}}。 这是jsFiddle

Answer 5

嗯，我不知道是否可以通过css这样做。如果你想在没有javascript的情况下完成这项工作，我唯一知道的就是这样： http://goo.gl/U3pBE