2

我有一个带有文本的 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 的边界。

4

3 回答 3

0

嗯，你有没有考虑过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%;
}

我希望这有帮助！

于 2013-06-25T21:25:27.350 回答
0

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

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

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

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

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

于 2013-07-02T00:15:46.897 回答
0

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

  1. 我改变了你的 'jQuery. textFit v1.0' 到' Fit​​Text.js 1.1'，我在谷歌的'适合文本'排名第一，看起来（和工作）很好。（他不需要固定宽度的文本容器）
  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 ' 表示强词 :) more here...

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

同样做'。sandia ' 现在从顶部和左侧的 5% 开始，并且具有父级的 90% 的宽度和高度。（90% 因为我想要每边 5% 的排水沟）。

在开始时，我们fitText() .sandia以及每次调整文档大小时。

编辑 1。

我现在对使用带有background-image的div做这样的事情没有任何想法，当然它可以使用JS来制作，但是纯CSS吗？也许与弹性盒模型有关。

于 2013-06-25T22:24:38.720 回答