JSFiddle - React, Tailwind, and code Playground

by utterstep

HTML

<div id="scalable">Текст</div>

CSS

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

div#scalable {
    position: relative;
    width: 700px;
    height: 500px;
    
    font-family: Arial;
    font-size: 80px;
    color: #fff;
    background: #5aa348;
    
    -webkit-transform-origin: 0 0;
}

JavaScript

onresize = function()
{
    var bodyWidth  = document.body.clientWidth
      , bodyHeight = document.body.clientHeight;
    var scalable = document.getElementById("scalable");
    scale = Math.min(bodyWidth / 700, bodyHeight / 500);
    
    scalable.style.top = (bodyHeight - (scalable.offsetHeight * scale)) / 2 + "px";
    scalable.style.left = (bodyWidth - (scalable.offsetWidth * scale)) / 2 + "px";
    scalable.style.webkitTransform = "scale(" + scale + ")";
}

onresize();