feat: self adjusted

src/App.css

@@ -7,6 +7,11 @@
     transition: 0.5s;
 }
 
+#root {
+    overflow: hidden;
+    width: 100vw;
+}
+
 .overlap>* {
     transition: 0.5s;
 }

src/App.tsx

@@ -1,10 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
 import "./App.css";
 
 export default function App() {
+  const designWidth = 1430;
+  const designHeight = 5550;
+  const [scale, setScale] = useState(window.innerWidth / designWidth);
+  const innerWidth = document.body.clientWidth;
+
   return (
-    <div className="desktop-template">
-    <div className="div">
+    <div
+      style={{
+        width: designWidth * scale + "px",
+        height: designHeight * scale + "px",
+        overflow: "hidden",
+        position: "relative"
+      }}
+      className="desktop-template">
+      <div onResize={() => {
+        setScale(innerWidth / designWidth);
+      }}
+        style={{
+          position: "absolute",
+          top: -60 * scale + "px",
+          left: 0,
+          transform: `scale(${scale})`,
+          height: '5640px',
+          width: '1440px',
+          transformOrigin: "left top",
+          backgroundSize: "100% 100%",
+        }} className="div">
         <div className="overlap">
           <div className="rectangle" />
           <img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />