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

Question

我正在尝试使用jQuery TextFill灵活地缩放字体大小以填充其可变宽度容器。问题是，我认为这只适用于固定宽度的容器。我想在一个有响应网格的站点上使用这个。

下面是我的测试，它确认jQuery TextFill对可变宽度容器不起作用:http://jsfidle.net/9uqcjdpy/1/

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

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

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

有什么办法能让这个成功吗？不需要使用jQuery TextFill,但这是我找到的最接近的东西。

Answer 1

快速jQuery插件:
http://www.jQueryscript.net/text/jQuery-plugin-for-auto-resizing-text-textfill.html不错的演示:
http://www.jQueryscript.net/demo/jQuery-plugin-for-auto-resizing-text-textfill/

Answer 2

从variablewidthes类中删除height。

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

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

$(window).resize();

null

null

null

null

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

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

但请注意，maxFontPixels中可能存在一个bug，如我们的注释中所述。

null

null