title: enlarge font size according to the div height
body: <p>I am applying text watermark on to multiples images and i want to display scaling of text.I am enlarge <code>font-size</code> according to the div by enlarging the div as well as text into them
  this is what i am doing <a href="http://jsfiddle.net/axtruo/fRq2J/1/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>$(document).ready(function () {
  
    //vertically enlarge div and font-size     
      $('#vertically').on('change', function() {
          ScaValue = this.value;
          OriginalHeight = $("#backgroundImg").height();
          var newHeightofDiv  = (OriginalHeight/100) * ScaValue;
          fontsize = newHeightofDiv/10;
          $("#dragable").css({"width":"auto","height":newHeightofDiv,"font-size":fontsize});
    });
  
  
          //horizontally enlarge div and font-size 
      $('#horizontally').on('change', function() {
          ScaValue = this.value;
          Originalwidth = $("#backgroundImg").width();
          var newWidthofDiv  = (Originalwidth/100) * ScaValue;
          fontsize = newWidthofDiv/10;
          $("#dragable").css({"width":newWidthofDiv,"height":"auto","font-size":fontsize});
    });
  
  
  }); 
  </code></pre>
  
  <p>The above code work fine in case of Horizontally Scaling but not get exact scaling in case of vertical Scaling. Please Point me in right direction </p>