1

我有一张图片和下面的一段文字。我正在尝试使图像的文本宽度的最大宽度。（图像的大小未定义，父 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

有什么方法可以实现吗？（不需要这样的标记，如果需要可以添加更多元素）

谢谢你的帮助！

4

5 回答 5

1

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

div {
    max-width: 500px;
}

div img {
    width: 100%;
}

请看这个 jsFiddle 演示 > http://jsfiddle.net/Vt9CL/

于 2013-02-20T13:37:05.370 回答
1

我已经玩了一点，我设法做到了htmland 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;
}

小提琴

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

于 2013-02-20T14:27:13.687 回答
1

如果您坚持自己构建的结构，那么 JS 是唯一的选择。

$(init);

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

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

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

于 2013-02-20T13:40:37.710 回答
0

您可以使用这个小脚本完成此操作：

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

它采用widthof theimg并将其应用于widthof p。这是jsFiddle

于 2013-02-20T13:42:40.633 回答
0

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

于 2013-02-20T13:49:15.990 回答