CSS / JQuery：使用背景图片定位和调整文字大小

Question

我有一个div，其文本的高度，宽度和位置（顶部和左侧）以百分比指定，以便可以在浏览器窗口中调整大小。 该div也有一个背景图像，我在调整大小时要保持其宽高比，并且要调整文本的大小以使其适合div的边界。

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

现在，我正在尝试将这个div放置在另一个div中，该div具有背景图像，其大小会更改为onResize，同时保持图像的长宽比（因此不会看起来失真）。

不过，我遇到了困难，因为如果我能够自动调整文本的大小以使其正常工作，那么我就不会保持宽高比，而且如果我正确设置了宽高比，则文本也不会调整大小。

调整了文本的大小，但是（如果将蜜蜂压得太小），它将使图片倾斜，而不是保持宽高比： 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的新手，但是我有其他语言的编程经验。

EDIT1我希望文本div在图像内保持相同的相对大小和位置。 就好像文本在图片本身内部一样（就位置和大小而言）。 因此，文字应始终贴在蜜蜂的翅膀上。 我想在调整大小时保持相同的宽高比。 EDIT2一些更多信息：我正在制作一个网站，上面有大图片，前面带有一些文本。 因此，我希望能够指定将容纳文本的div的尺寸和位置，并在div中放入任何要调整大小的文本，以使其适合div的边界。

Answer 1

嗯，您是否考虑过使用background-size: contain ？ 然后，它会缩放，但使用正确的宽高比也要尽可能大。 对于“ #parent”，我更改/添加的样式为：

#parent{
    background-size: contain;
    background-repeat:no-repeat;
}

这是一个JSFiddle示例 ，向您展示我在想什么。

如果这不是预期的行为，请告诉我，我们将竭诚为您服务。 祝好运！

（编辑）更好地了解您的目标之后，我认为我达到了您想要的预期行为。 你可以在这里看到它。

实际上，只是弄乱了一些CSS和结构。 我删除了蜜蜂，并使其成为“ #parent”内的img元素，而不是其背景，我不确定您是否介意。

在CSS方面，以下是我更改/添加的相关样式定义：

#what{
    width: 80%;   
    height: 20%;
    position:absolute;
    top:0;
    right:0;
}
#parent{
    width:100%;
    display:inline-block;
    position: relative;
}
#parent img{
    width:100%;
}

我希望这有帮助！

Answer 2

我不知道这是否正是您想要的，但是... http://jsfiddle.net/euK8C/

1. 我更改了您的jQuery。 textFit v1.0”到“ FitText.js 1.1”，我的Google在“ fit text”中排在首位，并且看起来（工作得很好）。 （他不需要固定宽度的文本容器）
2. 删除了“ #grandparent ”，现在我们只有一个“ #parent ”。

3. 添加了带有样式的“ < img >”标签

    max-width: 100%; 

   因此高度将与宽度成比例。

4. 将' #parent '样式更改为：

    position: relative; top: 10%; left: 10%; border: 1px solid #39dd9a; 

   不需要宽度和高度

5. 为什么使用' ＃spanBold ''..italic'等？ 在强调的文字上使用“ em ”（无论如何，他都会用斜体显示），在强词上使用“ strong ” ：) 在这里更多...

我们的图像现在是独立的，我们（浏览器）知道它的宽度是多少，因此“ #parent ”可以调整大小以包装整个图像。

同样做'。 sandia '现在从顶部和左侧开始为5％，并且父级的宽度和高度为90％。 （90％的原因我希望每侧5％的装订线）。

首先，我们调整fitText（）. sandia，并在每次调整文档大小时使用。

---

编辑1。

我现在不知道使用div和background-image做这样的事情，当然可以使用JS来完成 ，但是纯CSS吗？ 也许与弹性盒模型。

Answer 3

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

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

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

这样可以防止textFit在元素上设置display:table以便垂直对齐内容（在某些浏览器中，这会导致百分比高度失败）。 这导致您看到的异常大小。 不幸的是，设置为display:table元素容易出现尺寸问题。 这个特殊的东西对我来说是新的。 在将来的版本中，我将确保将文本包装在包含div的文本中，或者找到其他垂直对齐方式（可能使用负边距）。

您会看到，如果单击textFit（）按钮并在检查器中将文本设置为大1px，它将溢出其边界； 尺寸正确。