title: jQuery - Scale font-size to fill parent div height
body: <p>I have two 50% width divs inside a parent div. I would like to scale the font-size to always fill the height of the parent div when the window is resized.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="text"&gt;
      &lt;div class="left-text text-fill"&gt;
      &lt;span&gt;Paragraph of text&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="right-text text-fill"&gt;
      &lt;span&gt;Paragraph of text&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery solution I found</p>
  
  <pre><code>function textfill(options)
  {
      var fontSize = options.maxFontPixels;
      var t = $("span:first", this);
      var maxHeight= $(this).height();
      console.log(maxHeight);
      var textHeight;
      do {
          t.css({'font-size': fontSize});
          textHeight = t.height();
          fontSize = fontSize - 1;
      } while (textHeight &gt; maxHeight);
      return this;
  }
  $(".textfill").each(textfill({maxFontPixels: 500}));
  </code></pre>
  
  <p>The problem I have is that <code>this</code> is referring to the outer wrapper div so it isn't finding a span. Why isn't <code>this</code> referring to the <code>&lt;div class="text-fill"&gt;</code> which is the context of the function call? And how would I go about fixing it so that it is referring to that div and its child span?</p>
  
  <p>Let me know if you need more code or clarification.</p>