JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" >
      <div id="main"/>
</div>

CSS

#container {
          width: 100%;
          height: 100%;
          background-color: red;
          position: absolute;
        }
        
     
        
        
        #main {
          position: absolute;
          background-color: deepskyblue;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

JavaScript

var ratio = 16/9;

var container = document.getElementById("container");
var main = document.getElementById("main");

var lastWidth = 0;
var lastHeight = 0;

requestAnimationFrame(resize);

function resize() {
  if (getWidth() != lastWidth || getHeight() != lastHeight) {
    lastWidth = getWidth();
    lastHeight = getHeight();

    if (lastWidth/lastHeight > ratio) {
      main.style.height = lastHeight+"px";
      main.style.width = (lastHeight*ratio).toString()+"px";
      } else {
      main.style.width = lastWidth+"px";
      main.style.height = (lastWidth/ratio).toString()+"px";
    }
  }
  
  requestAnimationFrame(resize);





}


function getWidth() {
return container.offsetWidth;//.substring(0,container.style.width.length-2);
}

function getHeight() {
return container.offsetHeight;//.substring(0,container.style.height-2);
}