Change Font Size to automatically fit inside Div

Question

I'm trying to make text automatically resize to fully fit inside a div.

The problem is when text is going too big then my code is not working.
I am trying something similar to this.

I can't use this plugin because it create conflict with my code and with work online with width of div.
I want to do the same thing with height of the div after that.

Please make me correct what can I do?

This is what I am doing jsfiddle

        //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});  
  });

Answer 1

you can compare the offsetsize and the scrollsize if you want to detect if the object is overflowing

it would work like this

if( element.offsetHeight < element.scrollHeight ||
   element.offsetWidth < element.scrollWidth){
       console.log("element is overflowing");
       // change the font size here
} else {
    // do probably nothing here
}