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

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

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

如果您调整窗口大小，您会看到底部的d​​iv调整大小，但文本不会缩放。 如果您更改顶部容器的像素宽度，则会看到文字比例，但div无法调整大小。

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

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

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

---

从variablewidth类中移除height 。

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

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

$(window).resize();

小提琴

---

更新

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

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

但请注意，我们的评论中描述的maxFontPixels可能存在一个错误。

小提琴＃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/

链接地址: http://www.djcxy.com/p/87527.html

上一篇: Change font size to fit a variable width container

下一篇: Properly embedding Youtube video into bootstrap 3.0 page