根據圖像大小調整文本大小

我有一個圖像和下面的一段文字。我試圖使圖像的文本寬度的最大寬度。（圖像的大小沒有定義，是不是太定義父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

根據圖像大小調整文本大小

回答

相關問題