title: React: Scale instead of resize
body: <p>I have the following code to resize an element in React.
  The element is resized using <code>setEffect</code> while providing dynamic <code>width</code> and <code>height</code>.</p>
  <p><strong>I want to scale the element on height change instead of resizing it so when the windows height is changed, the element is scaled down instead of resized. How to do so ? Keeping the same ratio.</strong></p>
  <p><a href="https://codesandbox.io/s/boring-hermann-vmweu?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/boring-hermann-vmweu?file=/src/index.js</a></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  function MyComponent() {
    const [dimensions, setDimensions] = React.useState({
      height: window.innerHeight,
      width: window.innerWidth
    });
    React.useEffect(() =&gt; {
      const debouncedHandleResize = debounce(function handleResize() {
        setDimensions({
          height: window.innerHeight,
          width: window.innerWidth
        });
      }, 10);
  
      window.addEventListener(&quot;resize&quot;, debouncedHandleResize);
  
      return (_) =&gt; {
        window.removeEventListener(&quot;resize&quot;, debouncedHandleResize);
      };
    });
  
    return (
      &lt;div&gt;
        Rendered at {dimensions.width} x {dimensions.height}
        &lt;br /&gt;
        &lt;img
          style={{ width: dimensions.width, height: dimensions.height }}
          src=&quot;https://img.freepik.com/free-vector/digital-device-mockup_53876-89354.jpg?size=338&amp;ext=jpg&quot;
        /&gt;
      &lt;/div&gt;
    );
  }
  
  function debounce(fn, ms) {
    let timer;
    return (_) =&gt; {
      clearTimeout(timer);
      timer = setTimeout((_) =&gt; {
        timer = null;
        fn.apply(this, arguments);
      }, ms);
    };
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;MyComponent /&gt;, rootElement);
  </code></pre>
  <p>Edit : I found an alternative <a href="https://react-grid-layout.github.io/react-resizable/examples/1.html" rel="nofollow noreferrer">https://react-grid-layout.github.io/react-resizable/examples/1.html</a> but I don't know how to link the box to the windows size instead of manual size.</p>