Tengo un div de tamaño fijo con algún componente complejo. Quería escalar ese div y el contenido dentro de él, manteniendo su relación de aspecto, para que se ajuste a la ventana. Apliqué el siguiente código y funcionó. Pero el problema es que mi contenido se escala de acuerdo con el dispositivo, pero cuando me desplazo hacia abajo o hacia arriba, vuelve a escalar. ¿Cómo detengo este comportamiento?
Fragmento de código
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>