更改字体大小以适应可变宽度容器答案

【问题标题】：Change font size to fit a variable width container更改字体大小以适应可变宽度容器
【发布时间】：2015-04-07 03:11:56
【问题描述】：

我正在尝试使用jQuery TextFill 流畅地缩放字体大小以填充其可变宽度容器。麻烦的是，我认为这只适用于固定宽度的容器。我想在具有响应式网格的网站上使用它。

这是我的测试，它确认 jQuery TextFill 不适用于可变宽度容器： http://jsfiddle.net/9uqcjdpy/1/

如果您调整窗口大小，您会看到底部 div 调整大小，但文本不会缩放。如果您更改顶部容器的像素宽度，您将看到文本缩放，但 div 无法响应地调整大小。

我也尝试在一个高度与宽度成比例的容器中使用这种填充方法：

width: 40%;
padding-bottom: 23%;
height: 0;

有什么办法可以让它工作吗？不需要使用 jQuery TextFill，但这是我找到的最接近的东西。

【问题讨论】：

【解决方案1】：

从您的 variablewidth 类中删除 height。

您需要使用 TextFill 的 widthOnly 选项，并在窗口 resize 事件上更新：

$(window).resize(function() {
  $('.variablewidth').textfill({ 
    maxFontPixels: 250,
    widthOnly: true 
  });
});

$(window).resize();

Fiddle

更新

你可以像这样使高度成为宽度的函数：

function updateTextFill() {
  $('.variablewidth')
    .height($('.variablewidth').width()/2)
    .textfill({
      maxFontPixels: 250
    });
};

但请注意，maxFontPixels 中可能存在错误，如我们的 cmets 中所述。

【讨论】：

谢谢——问题是我希望容器的高度与宽度成正比...
再次感谢。不幸的是，我也需要设置高度，因为我希望使用 CMS 来实现这一点，其中容器中的文本内容可以更改，从而导致文本长度不同。我需要容器进行缩放（始终保持其纵横比相同）并让任意数量的文本填充该容器。
不确定我是否理解，但您可以在调整大小事件中将高度设为宽度的函数。如果您发布一个显示此问题的小提琴，我会看看我能做些什么。
嗯，我只是在寻找一种在保持比例的同时响应地放大 div 的方法，并使用 TextFill 之类的东西来获取我放入 div 中的任何文本以尽可能大同时适应它。
我的示例小提琴在您调整窗口大小时保持比例。如果您不希望文本换行，您可以像我在这里所做的那样将 white-space: nowrap; 添加到 CSS 中：jsfiddle.net/e40xnk5d/2 如果这些都不是您想要的，也许截图可以帮助我理解。

【解决方案2】：

【讨论】：