0

This has been asked long ago in about 2010, but the answers are outdated. I would like to force a font to fit in both height and width.

Currently I have this code:

<div class="box" style="width:300px;height:300px; background-color: coral;">
  MY TEXT
</div>

Using one of the suggestions found: textFit or any of the other similar scripts.
I can do the following:

enter image description here

What I would like to achieve is to be able to force it (even though it's unproportional) to do something like this:

enter image description here

It can be in js or css. Whichever this way could be accomplished. Any ideas?

Chris
  • 1,206
  • 2
  • 15
  • 35
FabricioG
  • 3,107
  • 6
  • 35
  • 74

1 Answers1

1

let el = document.querySelector(".box");

let width = 300;
let height = 300;

let ws = (width / el.offsetWidth);

let hs = (height / el.offsetHeight);


el.style.transform = `scaleX(${ws}) scaleY(${hs})`;
<div class="box" style="display:inline-block; transform-origin: top left; background-color: coral;">
  MY TEXT
</div>

You can use transform: scale(x, y) property.

Harry
  • 521
  • 7
  • 21
dnaz
  • 276
  • 5
  • 14