Question

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

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

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

我也试图在一个容器中使用它，这个容器的高度与它的宽度成正比，采用这种填充方法：

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

有没有办法让这个工作？不需要使用jQuery TextFill，但这是我发现的最接近的东西。

Answer 1

从height课程中删除variablewidth。

您需要使用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中可能存在错误，如我们的评论所述。

Fiddle #2

Answer 2

快速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/

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

2 个答案:

Fiddle

Fiddle #2