jquery - CSS/JQuery : Positioning and resizing text with background image

Question

我有一个带有文本的 div，其高度、宽度和位置(顶部和左侧)均以百分比指定，以便可以随浏览器窗口调整大小。这个 div 还有一个背景图像，我想在调整大小时保持其宽高比，并且我想调整文本大小以使其适合 div 的边界。

我发现了一个 jQuery 插件，我对其进行了一些修改，以便我可以调整 onResize 的字体大小以适合 div。结果:http://jsfiddle.net/JMVXA/10/

现在我想做的就是把这个div放在另一个带有背景图像的div中，背景图像的大小在Resize时改变，同时保持图像的纵横比(这样它看起来就不会扭曲)。

不过我在这方面遇到了困难，因为如果我让自动文本调整大小工作，我就不会保持宽高比，并且如果我得到正确的宽高比，文本将不会调整大小。

调整了文本大小，但是(如果将蜜蜂压得太小)它会扭曲图片而不是保持纵横比:http://jsfiddle.net/JMVXA/11/

#parent{
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url("Bee Image");
    //padding-top: 81.799591002%;
    background-size: 100% 100%;
}

如果我将 #parent 更改为此，纵横比有效，但文本不会适当调整大小:

#parent{
    width: 100%;
    position: relative;
    background-image: url("Bee Image");
    padding-top: 81.799591002%;
    background-size: 100% 100%;
}

我知道部分问题。该插件要求 width() 和 height() 返回一个非零数字，但我的纵横比 CSS 未指定高度(使其返回 0 高度)。所以我不知道从这里该做什么。

关于如何实现这一目标有什么想法吗？

我对 HTML、jQuery 和 CSS 很陌生，但我有其他语言的编程经验。

编辑1 我希望文本 div 在图像中保持相同的相对大小和位置。就好像文本位于图片本身内部(就位置和大小而言)。因此，文本应该始终位于蜜蜂的翅膀上。我想在调整大小时保持相同的纵横比。 编辑2 更多信息:我正在制作一个网站，其中包含大图像，图像前面有一些文本。因此，我希望能够指定将保存文本的 div 的尺寸和位置，并调整我放入 div 中的任何文本的大小，以便它可以适合 div 的边界。

Answer 1

这对我有用:http://jsfiddle.net/JMVXA/53/

关键是将alignVert属性设置为false:

$('#what').textFit({alignVert: false});

这可以防止 textFit 在元素上设置 display:table 以便垂直对齐内容(这在某些浏览器中会导致百分比高度失败)。这导致了您所看到的奇怪的尺寸。不幸的是，设置为 display:table 的元素很容易出现尺寸问题。这个特别的对我来说是新的。在未来的版本中，我一定会将文本包装在包含 div 中或找到另一种垂直对齐方法(可能使用负边距)。

您将看到，如果您单击 textFit() 按钮并将文本大小在检查器中放大 1px，它将溢出其边界；它的尺寸正确。