Change font size to fit a variable width container

I'm trying to fluidly scale the font size to fill its variable-width container using jQuery TextFill. Trouble is, I think this only works with fixed-width containers. I want to use this on a site with a responsive grid.

Here's my test, which confirms jQuery TextFill doesn't work on variable-width containers: http://jsfiddle.net/9uqcjdpy/1/

If you resize the window, you'll see the bottom div resizes, but the text doesn't scale. If you change the pixel width of the top container, you'll see the text scales, but the div can't resize responsively.

I'm also trying to use it in a container whose height remains proportional to its width with this padding method:

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

Is there any way to get this working? Doesn't need to use jQuery TextFill, but that's the closest thing I've found.

---

Remove height from your variablewidth class.

You'll want to use the widthOnly option of TextFill, and update on a window resize event:

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

$(window).resize();

Fiddle

---

Update

You can make height a function of width like this:

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

But note that there may be a bug in maxFontPixels as described in our comments.

Fiddle #2

---

Quick jQuery Plugin:
http://www.jqueryscript.net/text/jQuery-Plugin-For-Auto-Resizing-Text-textfill.html

Nice Demo:
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Resizing-Text-textfill/

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

上一篇: 尺寸根据设备

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