увеличить размер шрифта в соответствии с высотой div

Question

увеличить размер шрифта в соответствии с высотой div

0

Я применяю текстовый водяной знак для умножения изображений, и я хочу отображать масштабирование текста. Я увеличиваю font-size соответствии с div, увеличивая div, а также текст в них, это то, что я делаю 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});
  });


});

Вышеприведенный код работает отлично в случае горизонтального масштабирования, но не получает точного масштабирования в случае вертикального масштабирования. Пожалуйста, укажите мне в правильном направлении

Anni 06 май 2014, в 05:57

Источник

0

Почему вы не используете font-size:10% в CSS?
brainless coder 06 май 2014, в 03:37
1

Или используйте em , который автоматически масштабируется до line-height .
royhowie 06 май 2014, в 03:37
0

я пробовал оба font-size:10% и em но все еще не получить правильные значения
Anni 06 май 2014, в 03:42
0

возможно использовать тот же идентификатор на том же объекте
Medda86 06 май 2014, в 05:24
0

кажется backgroundImg width вдвое больше, чем height
Kiranramchandran 06 май 2014, в 05:37

Показать ещё 3 комментария

Теги:

jquery

html

css

css3

jquery-ui

1 ответ

Ещё вопросы

Почему вы не используете font-size:10% в CSS?
Или используйте em , который автоматически масштабируется до line-height .
я пробовал оба font-size:10% и em но все еще не получить правильные значения
возможно использовать тот же идентификатор на том же объекте
кажется backgroundImg width вдвое больше, чем height

user3605014 · Answer 1 · 2014-05-06T06-06-00.000Z

Вы можете использовать плагин jquery resize для вызова события div resize. Вы получите этот плагин из следующей ссылки:

http://benalman.com/projects/jquery-resize-plugin/

Я проверяю масштаб изменения высоты, вычитая currentHeight с предыдущей высоты. Для этого я удалил значение 'px' из аргумента height. Тогда, если это увеличение размера, то я увеличу размер шрифта в аналогичном соотношении в соответствии со скоростью изменения высоты, в противном случае я уменьшу размер шрифта.

Но при этом были некоторые проблемы. Когда я изменил размер шрифта, он также изменил размер div, поэтому он снова назвал событие изменения размера и стал бесконечным циклом. Поэтому я использовал одну логическую переменную с именем resi (сокращение от изменения размера), и когда размер шрифта сделан, я установил его в true, поэтому в следующий раз, когда я вызову метод изменения размера, он пропустит выполнение функции

    <html>
    <head>

    </head>
    <body>
     <div id="mydiv" style="min-height:300px;font-size:23px;border:solid 2px black;">
         Hai I am Akhil
         <div id="inner" style='height:200px;border:solid 2px red;'></div> 
         </div>
      </div>
     <input type="button" id="check" value="Increase"/>
     <input type="button" id="down" value="Decrease"/>
     <script  src="jquery-1.11.1.js"></script>
     <script  src="jquery-resize.js"></script>
     <script>
       var height=$("#mydiv").css("height");
       height=height.substring(0,(height.length-2));
       var font=$("#mydiv").css("font-size");
       var resi=false;
       $("#mydiv").resize(function(){
            if(resi){
                 var currentHeight=$("#mydiv").css("height");
                 currentHeight= currentHeight.substring(0,(currentHeight.length-2));
                 var change=currentHeight-height;
                 height=currentHeight;
                 if(change>0){
                var currentFont=$("#mydiv").css("font-size");
                font=currentFont;
                      currentFont= currentFont.substring(0,(currentFont.length-2));
                $("#mydiv").css("font-size", ((currentFont*(change/100))+"px"));
                      resi=false;
                 }else if(change<0){
                change=change*-1;
                var currentFont=$("#mydiv").css("font-size");
                font=currentFont;
                      currentFont= currentFont.substring(0,(currentFont.length-2));
                $("#mydiv").css("font-size", ((currentFont/(change/100))+"px"));
                      resi=false;
                 }
              }
           });
          $("#check").click(function(){
                 $("#inner").css("height","600px");
                 resi=true;
          });
         $("#down").click(function(){
               $("#inner").css("height","400px");
               resi=true;
          });
       </script>
       </html>

Я дал 2 кнопки для увеличения и уменьшения размера div. Если у вас есть какие-либо сомнения, вы можете спросить.