如何用HTML / CSS上的文本填充图像并进行缩放？

Question

我有一些文字我想在图像中插入并根据文本的长度缩放图像。

我选择了一种方法，我将图像设置为div的背景，然后用文本填充div。

我已经尝试了很多CSS的东西，我无法使背景高度适合div高度（文本长度）。

我能找到的就是如何为整个屏幕制作背景并重新缩放它们;没有任何关于这个。帮助

Answer 1

如果您能够使用CSS3属性，可以使用

background-size: 100% contain;

在你的div上。如果不是，你将不得不用绝对定位和javascript来做一些诡计以计算尺寸。

Answer 2

你的意思是这样吗？这只是HTML＆amp; CSS。

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

不幸的是，它使用一个额外的元素将文本放在图像前面，并使用一个元素作为图像本身。但是，如果可以，我们可以使用Chris建议的CSS3选项。

Answer 3

如果没有CSS3，则无法拉伸背景。您需要使用img标记和一些JavaScript。

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