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

我有一个图像和下面的一段文字。我试图使图像的文本宽度的最大宽度。（图像的大小没有定义，是不是太定义父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>

我画一个快速的样机为更好地理解 - enter image description here

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

有什么办法执行这个？（这种标记不是必需的，如果需要可以添加更多元素）

谢谢你的帮助！

来源

2013-02-20 Marvin3

你需要将它们包装在另一个div元素，设置它的最大宽度属性，然后定义一个100％的宽度为相关图片如下：

div { 
    max-width: 500px; 
} 

div img { 
    width: 100%; 
}

请参见本文的jsfiddle演示>http://jsfiddle.net/Vt9CL/

来源

2013-02-20 13:37:05 BenM

谢谢，问题是我不知道图像的宽度（最大宽度）。 – Marvin3 2013-02-20 13:45:34

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

$(init); 

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

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

包装形象和段落文本在另一个容器会更好不过。

来源

2013-02-20 13:40:37 strah

你可以做到这一点使用这个脚本：

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

它走的是img的width，它是把它应用到的p的width。这里是jsFiddle

来源

2013-02-20 13:42:40 dinodsaurus

Mhhhhm，我不知道是否有可能通过CSS来做到这一点。如果你想获得这种无javascript做，这是我知道的唯一的事情是这样的： http://goo.gl/U3pBE

来源

2013-02-20 13:49:15 Christian

我周围有点玩过，我设法与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。

来源

2013-02-20 14:27:13

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

回答

相关问题