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

I have an image and a block of text below of it. I'm trying to make max-width of text width of image. (size of image is not defined and size of parent div is not defined too)

我有一个图像和下面的文本块。我正在尝试制作图像文本宽度的最大宽度。 (图像的大小未定义,父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>

I draw a quick mockup for better understanding - 根据图像大小调整文本大小

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

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

Is there any way to implement this? (such markup is not required, more elements can be added if required)

有没有办法实现这个? (不需要这样的标记,如果需要可以添加更多元素)

Thank you for help!

谢谢你的帮助!

5 个解决方案

#1

You will need to wrap them in another div element, set its max-width property, and then define a 100% width for the image as follows:

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

div {
    max-width: 500px;
}

div img {
    width: 100%;
}

Please see this jsFiddle demo > http://jsfiddle.net/Vt9CL/

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

#2

if you insist on the structure you've built than JS is the only option.

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

$(init);

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

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

Wrapping image and paragraph text in another container would be better though.

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

#3

I've played around a bit and I managed to do it with html and css: html:

我玩了一下,我设法用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

The problem is that it works only in firefox and chrome.

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

#4

You can accomplish this using this little script:

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

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

It is taking the width of the img and it is applying it to the width of p. Here is jsFiddle

它取img的宽度,并将其应用于p的宽度。这是jsFiddle

#5

Mhhhhm, I have no idea if it's possible to do this via css. If you want to get this done without javascript, the only thing which I know is something like this: http://goo.gl/U3pBE

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

#1