如何在HTML / CSS上用文本填充圖像並縮放圖像？

Question

我有一些文本想要插入圖像中，並根據該文本的長度縮放圖像。

我選擇了一種方法，將圖像設置為div的背景，然后用文本填充div。

我已經嘗試了很多CSS東西，但無法使背景高度適合div高度（文本長度）。

我所能找到的就是如何為整個屏幕制作背景並調整其比例。 與此無關。 救命？

Answer 1

如果您能夠使用CSS3屬性，則可以使用

background-size: 100% contain;

在您的div上。 如果不是這樣，您將不得不使用絕對定位和JavaScript來進行一些欺騙，以計算尺寸。

Answer 2

你的意思是這樣嗎？ 它只是HTML和CSS。

http://jsfiddle.net/mqchen/Bcmy3/

不幸的是，它使用一個額外的元素將文本置於圖像的前面，並使用了圖像本身的元素。 但是，如果可以的話，我們建議克里斯使用CSS3選項。

Answer 3

沒有CSS3，就無法拉伸背景。 您將需要使用img標簽和一些JavaScript。

var img = document.getElementById("stretchImg");
var textSpan = document.getElementById("imgText");
img.style.height = textSpan.offsetHeight;