3

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>
Mohsen Bg
  • 143
  • 2
  • 6
Tapu Das
  • 391
  • 2
  • 17
  • You may be able to avoid javascript on this one -- check out https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Frish Aug 25 '22 at 05:26
  • 1
    It is better to avoid using this approach for making a div container scaled to the screen. Instead, some CSS tricks can satisfy it better. – Cyrus Raoufi Aug 25 '22 at 05:31
  • When you scroll down and up again it does what? I only see a white page with a tiny form or something in the center. – Bman70 Aug 25 '22 at 06:31
  • @Frish I tried some of the solution from the given link. But didn't work. – Tapu Das Aug 25 '22 at 06:39
  • @Bman70 sorry, I just shared the template of my code, I am not permitted to share the content of my code. – Tapu Das Aug 25 '22 at 06:40
  • @Bman70 main problem in my mobile device, when I am scrolling up / down, my content still scales continuously. – Tapu Das Aug 25 '22 at 07:00
  • 1
    What is your mobile device? Are you saying that the resize function is being called on a scroll? I haven't heard of that before. – A Haworth Aug 25 '22 at 07:16
  • I am using chrome browser in oneplus device. In the same page when i scroll down, my content resizes into one size, then when I scroll up again my content resizes into the previous size. – Tapu Das Aug 25 '22 at 07:26
  • I solved it. The problem was that resize event-Listener was calling multiple times. just added {once: true} as third parameter with event-Listener function. Worked like a charm! – Tapu Das Aug 25 '22 at 08:25

0 Answers0