Question

我有一个带有文本的div，其高度，宽度和位置（顶部和左侧）以百分比指定，以便可以使用浏览器窗口调整大小。这个div还有一个背景图像，我希望在调整大小时保持纵横比，我想调整文本的大小，使其适合div的边界。

我发现了一个jQuery插件，我修改了一下，以便我可以调整字体大小onResize以适应div。结果：http://jsfiddle.net/JMVXA/10/

现在我要做的是将这个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 example来向您展示我在想什么。

如果这不是预期的行为，请告诉我，我们将很乐意为您提供进一步的帮助。祝你好运！

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

实际上，只是耍弄了一些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/

我将你的'jQuery。 textFit v1.0'改为' FitText.js 1.1'，我的在谷歌的第一个位置'适合文本'和外观（和工作）精细。（他不需要固定宽度的文本容器）
删除了“ #grandparent ”，现在我们只有一个“ #parent ”。
添加了'＆lt; img ＆gt;'带样式的标签
```
max-width: 100%;
```
因此高度将与宽度成正比。

将“ #parent ”样式更改为：

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

无需宽度和高度

为什么要使用'＃ spanBold ''.. ititalic'等？使用“ em ”表示强调文本（无论如何，他将使用斜体）和“强”表示强词:) more here...

我们的图片现在是独立的，我们（浏览器）知道它的宽度是什么，所以' #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的文本大小，它将溢出其边界;它的大小正确。

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

3 个答案:

编辑1。