enlarge font size according to the div height

Monday, May 5, 2014

I am applying text watermark on to multiples images and i want to display scaling of text.I am enlarge font-size according to the div by enlarging the div as well as text into them this is what i am doing jsfiddle



$(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});
});


});


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







http://ift.tt/RmUxmx