JSFiddle - React, Tailwind, and code Playground

by Tamsen Pozzolo

HTML

<div id="fakeViewport" style="">
  <div id="container" style="">
    <div id="square">
      Bloop
    </div>
  </div>
</div>

CSS

#fakeViewport {
  display:block;
  width:200px; 
  height:200px;
  background:black;
  overflow:hidden;
}

#container {
  display: inline-block;
  width:1920px;
  height:1080px;
  background:grey;
  position:absolute;
  top: 0;
  left: 0;
}

#square {
  position:relative;
  display:block;
  width:200px;
  height:200px;
  top:100px;
  left:100px;
  background: pink;
}

JavaScript

derp = () => {

	const viewport =  document.getElementById("fakeViewport");
 const container =  document.getElementById("container");
 
     console.log(viewport.style);


	const onResize = () => {

    
    const viewportW = viewport.clientWidth;
    const viewportH = viewport.clientHeight;
    
    const containerW = container.clientWidth;
    const containerH = container.clientHeight;
   
    
    console.log(viewportW,viewportH,containerW,containerH);
    
    
    const sX = viewportW / containerW;
    const sY = viewportH / containerH;
    
    const scale = sX > sY ? sX : sY;
    
    const transform = "transform(-50%, -50%) scale( " + scale.toFixed(3).toString() + " )";
   
   container.style.transform = transform;
   console.log(scale,transform,container.style.transform);

  };
  
  
  window.addEventListener("resize",onResize);
  onResize();
};


derp();