JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

JavaScript

function scaleAmountNeededToFit(el, margin = 0) {
  var parentSize = {
    width: el.parentElement.clientWidth - margin * 2,
    height: el.parentElement.clientHeight - margin * 2
  };

  return Math.min(parentSize.width / el.clientWidth,
    parentSize.height / el.clientHeight);
}

function fitToParent(element, margin) {
  var scale = scaleAmountNeededToFit(element, margin);
  element.style.transformOrigin = "0 0";
  element.style.transform = `translate(${margin}px, ${margin}px) scale(${scale})`;
}

window.fitToParent = fitToParent;



function main() {
  var margin = 0;
  requestAnimationFrame(function fitToParentOnResize() {
    fitToParent(document.getElementById('element_to_scale'), margin);
  });
}

window.addEventListener("DOMContentLoaded", main);
window.addEventListener("resize", main);