调整div大小时调整字体大小

问题描述：

我正在开发一个Web应用程序，它允许您将可调整大小并可通过jQuery拖动的动态div添加到具有黑色背景的div容器中。调整div大小时调整字体大小

下面是这个应用程序的代码：

.centrer { 
 
    display: block; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    height : 768px; 
 
    width : 432px; 
 
    background-color : #000000; 
 
} 
 

 
.menu { 
 
    border:1px solid black; 
 
    padding-left:15px; 
 
    padding-right:15px; 
 
    padding-top:2px; 
 
    padding-bottom:2px; 
 
    float:left; 
 
    text-align : center; 
 
} 
 

 
h3, li, ul{ 
 
    text-align : left; 
 
} 
 

 
.encadrer { 
 
    border: 1px solid white; 
 
    height : 120px; 
 
    position:absolute !important; 
 
} 
 

 
.centrerTitre{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color : white; 
 
    margin : auto; 
 
    text-align : center; 
 
    padding-top : 7px; 
 
} 
 

 
.centrerPara{ 
 
    font-size: 16; 
 
    color : white; 
 
    margin : auto; 
 
    text-align : center; 
 
    padding-left : 7px; 
 
    padding-right : 7px; 
 
} 
 

 
.inner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    text-align:center; 
 
    width:100%; 
 
} 
 

 
.encadrer:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 

 
/*----- Resizable ------*/ 
 
.ui-resizable { position: relative;} 
 
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} 
 
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
 
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; } 
 
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; } 
 
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; } 
 
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; } 
 
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; } 
 
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; } 
 
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; } 
 
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; } 
 
/*----------------------*/

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"/> 
 
     <title>Affichage</title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" /> 
 

 
    <body> 
 
     <div id="menu" class="menu"> 
 
      <h3>Taille de l'écran</h3> 
 

 
      <select id='selector'> 
 
       <option value="1920x1080">1920x1080</option> 
 
      </select> 
 
      </br></br> 
 
      <table> 
 
       <tr> 
 
        <td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td> 
 
        <td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td> 
 
       </tr> 
 
      </table> 
 
      </br> 
 
      <h3>Ajouter des éléments</h3> 
 
      <ul> 
 
       <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="bg"></div> 
 

 
     <script type="text/javascript"> 
 
      var bg = document.getElementById('bg'); 
 
      bg.className = "centrer"; 
 

 
      var ajoutImg = document.getElementById('ajoutImage'); 
 

 
      var initDiagonal; 
 
      var initFontSize; 
 

 
      var rad = document.getElementsByName('orientation'); 
 

 
      for(var i = 0; i < rad.length; i++) { 
 
       rad[i].onclick = tailleEcran; 
 
      } 
 

 
      document.getElementById("selector").addEventListener("change", tailleEcran, false); 
 

 
      ajoutImg.onclick = function() { 
 

 
       //var name = prompt("Texte de l'image :"); 
 

 
       var container = document.createElement("div"); 
 
       container.className = 'encadrer'; 
 
       var inner = document.createElement("div"); 
 
       inner.className = 'inner'; 
 
       var titre = document.createElement("p"); 
 
       var para = document.createElement("p"); 
 
       titre.textContent = "Titre"; 
 
       titre.className = 'centrerTitre'; 
 
       inner.appendChild(titre); 
 
       para.textContent = prompt("Texte de l'image :");; 
 
       para.className = 'centrerPara'; 
 
       inner.appendChild(para); 
 
       container.appendChild(inner); 
 

 
       //var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>'); 
 
       bg.appendChild(container); 
 

 
       $(container) 
 
       .draggable({containment:"parent"}) 
 
       .resizable({ 
 
        containment:"parent", 
 
        handles: "all" 
 
       }); 
 
      }; 
 

 
      function tailleEcran() { 
 
       switch(document.getElementById("selector").value){ 
 
        case '1920x1080' : 
 
         if(document.getElementById("portrait").checked == true){ 
 
          bg.style.height = '768px'; 
 
          bg.style.width = '432px'; 
 
         }else{ 
 
          bg.style.height = '432px'; 
 
          bg.style.width = '768px'; 
 
         } 
 
        break; 
 
       } 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

我试图做出动态调整大小div的内容的字体大小，当你调整div，因为你可以在这个帖子看到：

Can text be resizable using jquery-ui?

我把所有的节点都放到了变量中，但是我没有把这个函数添加到我的应用中。

有人知道我该怎么做？

感谢您的关注，

问候，

马克西姆OZENNE。

我写了一个jquery插件很久以前做了这个，检查出来 - https://github.com/ozzyogkush/jquery.textAutoSize - 有一段时间没有更新，但工作得很好，当我写了它。 – Derek

我会检查它，并给你反馈，谢谢:) –

实际上看它的代码，它不做调整大小，但可以很容易地分叉和更新工作就像那样。 – Derek

答

好吧，我终于发现了一个jquery脚本，它可以很容易地做到，而不需要修改代码。

jquery脚本是FitText（http://fittextjs.com/）。

感谢伊戈尔Ivancha，我发现这个剧本在您的旨意的CSS溶液底部：P

你只需要添加：

$(titre) 
.fitText(1.5); 
$(para) 
.fitText(0.4);

到<script>标签，然后它会正常工作。谢谢大家！

调整div大小时调整字体大小

相关推荐