1

I have a div box. I am trying to increase and decrease the font size inside the div as the div size changed. Increase in div dimensions to increase font size, decrease in div dimensions then decrease the font size.

E.g. Base size 300px x 300px, and font size 1em. As the user drags it to 400px x 400px let the font increase automatically in size to 1.5em in a fixed ratio.

I have no clues how to go about it. How can I do achieve this? One approach is purely CSS an second to be using Javascript. I think pure CSS would be the best choice.

  #box {
  font-size: 1em;
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
  }

  #box a{
    text-decoration: none;
    font-family: 'Segoe UI';
    color: black;
  }
  
  h1 {
     font-family: 'Segoe UI';
     font-weight: normal;
  }
<!DOCTYPE html>
<html>
<body>

<h1>The resize Property</h1>

<div id="box">
  <a>How can I change the size of this text font when the box is resized; auto increase font size, auto decrease font size.</a>

</div>

</body>
</html>
Majoris
  • 2,963
  • 6
  • 47
  • 81

0 Answers0