I have a fixed-sized div with some complex component.I wanted to scale that div and the content inside it, maintaining its aspect ratio, so it fits the window. I applied the following code and it worked. But the issue is, that my content is scaled according to the device but when I scroll down/up it again scales. How do I stop this behavior?
Code Snippet
let outer = document.getElementById("outer"),
wrapper = document.getElementById("wrap"),
maxWidth = outer.clientWidth,
maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize() {
let scale,
width = window.innerWidth,
height = window.innerHeight,
isMax = width >= maxWidth && height >= maxHeight;
scale = Math.min(width / maxWidth, height / maxHeight);
outer.style.transform = isMax ? "" : "scale(" + scale + ")";
wrapper.style.width = isMax ? "" : maxWidth * scale;
wrapper.style.height = isMax ? "" : maxHeight * scale;
wrapper.style.margin = "0 auto";
}<div id="wrap" style="width:420px;height: 980px;border-radius: 10px;margin: 0 auto;margin-top:10px;padding:0px;box-shadow: 0px 0px 50px #000000;overflow: hidden;position:relative;transform-origin: 15% 0%;">
<div id="outer" style="width:420px;height:980px;position:relative">
<h2 style="text-align:center;font-family:'Dosis'">Team1 vs Team2 Rating</h2>
${header_mobile}
<h5 style="margin-bottom:5px;margin-right:5px;text-align:end;margin-top:0">${`⭐ - Top Rated Player`}</h5>
<div style="position: relative; width: 425px; margin-left: 0px">
${frame1}
</div>
<h3 style="text-align:center;margin-top:2px;margin-bottom:30px">Substitution List</h3>
<div style="display:flex;justify-content:space-between;margin:5px;padding:5px">
<div style="display:flex;justify-content:flex-start;flex-direction:column;flex-wrap:no-wrap;margin-left:10px;padding-left:20px;width:240px;margin-top:-15px;box-shadow: 0px 0px 50px #000000;overflow-y:auto;margin-right:10px">
${s1Row}
</div>
<div style="display:flex;justify-content:flex-start;flex-wrap:no-wrap;margin-right:5px;padding-left:60px;width:200px;margin-top:-15px;box-shadow: 0px 0px 50px #000000;overflow-x:auto;">
${s2Row}
</div>
</div>
</div>
</div>