fix: 🐛 fix img follow as you change screen

chaoyen1111 · chaoyen1111 · commit 398743943a48 · 2022-11-02T23:23:55.000+08:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hant-Tw">
+<html lang="zh-Hant-TW">
   <head>
     <meta charset="UTF-8" />
     <meta
diff --git a/js/main.js b/js/main.js
@@ -378,4 +378,23 @@
     kebbi.addEventListener('touchstart', target);
   }
 
+   // 處理中間圖片跟隨視窗大小移動位置
+   function screenRotate() {
+    const kebbi = document.getElementById('svgKebbi');
+    const circle = document.querySelector('.circle');
+    const ww = content.offsetWidth;
+    const wh = content.offsetHeight;
+    const ox = (ww - kebbi.offsetWidth) / 2;
+    const oy = (wh * 0.8 - kebbi.offsetHeight) / 2;
+    kebbi.style.left = `${ox}px`;
+    kebbi.style.top = `${oy}px`;
+    circle.style.width = `${ww * 0.4}px`;
+    circle.style.height = `${ww * 0.4}px`;
+    circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
+    circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  }
+
+  window.addEventListener('resize', screenRotate);
+  screenRotate();
+
 }();
