Resize font in div width and height look like ctrl + t in photoshop

259 Views Asked by At

can i resize (resizable jquery ui) font in div look like CTRL+T in Photoshop?

see this image

I want resize div with jquery ui and resize auto font in div I'm not responsive mean resize font look like this image.

1

There are 1 best solutions below

2
On

I think this code I just made may help you

function createResizable(selector,relativeFontSize)
         {    
           $( selector ).css('font-size',parseInt(($(selector).width() * relativeFontSize)/100)+'px');      
          $(function() {
             $( selector ).resizable({
                resize: function (event, ui) {
                   var newFontSize = parseInt((ui.size.width * relativeFontSize)/100);
                   $(this).css('font-size',newFontSize+'px');
                }
             });
          });
          $(selector).resizable({ alsoResize: selector});
         }

         $(document).ready(function(){
          createResizable('#resizable',45);
         });
         #resizable{ 
          width: 150px; height: 75px; 
          padding: 0.5em;text-align: center; margin: 0; 
         }
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id = "resizable" class = "ui-widget-content"> 
         Hello
      </div>