fix: 🐛 fix img follow as you change screen

Author: chaoyen1111

css/main.css

@@ -53,8 +53,8 @@ body {
   overflow: hidden;
 }
 
-.content.loading *{
-  opacity:0;
+.content.loading * {
+  opacity: 0;
 }
 
 .panel {
@@ -63,7 +63,7 @@ body {
   height: 100%;
   top: 0;
   left: 0;
-  transition:.3s;
+  transition: .3s;
 }
 
 /* setting */
@@ -153,13 +153,13 @@ body {
   background: rgba(100, 200, 255, .3);
 }
 
-#setting #saveBtn{
+#setting #saveBtn {
   width: max-content;
-  font-size:1.2rem;
-  margin:30px auto 10px;
-  padding:10px 30px;
-  background:#e50;
-  border-radius:20px;
+  font-size: 1.2rem;
+  margin: 30px auto 10px;
+  padding: 10px 30px;
+  background: #e50;
+  border-radius: 20px;
   text-shadow: #900 0 0 5px;
 }
 
@@ -288,6 +288,7 @@ body {
   border: 10px solid #fff;
   opacity: .1;
   border-radius: 50%;
+  display: inline-block;
 }
 
 #main01 footer {
@@ -306,12 +307,14 @@ body {
   z-index: 2;
   vertical-align: middle;
 }
-#main01 footer .monster-btn svg{
-  transition:.3s;
-  background:none;
+
+#main01 footer .monster-btn svg {
+  transition: .3s;
+  background: none;
 }
-#main01 footer .monster-btn.click svg{
-  width:90%;
+
+#main01 footer .monster-btn.click svg {
+  width: 90%;
 }
 
 /* main02 */
@@ -348,7 +351,7 @@ body {
   color: #ddd;
   margin: 0 auto;
   padding: 10px 1rem;
-  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
   border-radius: 10px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -358,12 +361,12 @@ body {
   display: inline-block;
   font-size: 1.5rem;
   line-height: 1;
-  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   vertical-align: top;
-  transition:.3s;
+  transition: .3s;
   padding: 10px 1rem;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -372,26 +375,26 @@ body {
 
 #main02 .input-group-button.click {
   background: rgba(255, 255, 255, .4);
-  box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
+  box-shadow: inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
 }
 
 #main02 .btn {
   display: inline-block;
   width: 38%;
   height: 14%;
-  box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
+  box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px;
   margin: 7px 5px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   vertical-align: top;
   -webkit-user-select: none;
-  transition:.3s;
+  transition: .3s;
 }
 
 #main02 .btn.click {
   background: rgba(255, 255, 255, .4);
-  box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
+  box-shadow: inset #ccc 0 0 0 3px, #ccc 0 0 0 0;
 }
 
 #main02 .btn::before {
@@ -406,122 +409,139 @@ body {
   display: inline-block;
   vertical-align: middle;
   font-size: 1.5rem;
-  transition:.3s;
+  transition: .3s;
 }
 
 #main02 .btn.click span {
   font-size: 1.4rem;
 }
 
 /* popup */
-#popup{
-  top:20%;
-  left:15%;
-  width:70%;
-  height:max-content;
-  border:3px solid #fff;
-  z-index:20;
-  border-radius:20px;
-  padding:30px 10px;
-  text-align:center;
-  background:rgba(50,100,150,.9);
-  color:#fff;
-  opacity:0;
+#popup {
+  top: 20%;
+  left: 15%;
+  width: 70%;
+  height: max-content;
+  border: 3px solid #fff;
+  z-index: 20;
+  border-radius: 20px;
+  padding: 30px 10px;
+  text-align: center;
+  background: rgba(50, 100, 150, .9);
+  color: #fff;
+  opacity: 0;
   pointer-events: none;
-  transition:.3s;
+  transition: .3s;
 }
-#popup.show{
-  top:17%;
-  opacity:1;
+
+#popup.show {
+  top: 17%;
+  opacity: 1;
   pointer-events: auto;
 }
-#popup h4{
-  font-size:1.1rem;
-  margin-bottom:10px;
+
+#popup h4 {
+  font-size: 1.1rem;
+  margin-bottom: 10px;
 }
-#saveUrl{
-  font-size:1.1rem;
-  width:100%;
-  word-wrap:break-word;
+
+#saveUrl {
+  font-size: 1.1rem;
+  width: 100%;
+  word-wrap: break-word;
   line-height: 1.5;
 }
-#saveUrl::selection{
-  color:#fff;
-  background:none;
+
+#saveUrl::selection {
+  color: #fff;
+  background: none;
 }
-#copy{
-  font-size:1.1rem;
-  padding:10px 30px;
-  width:max-content;
-  margin:20px auto 0;
-  background:#e50;
-  border-radius:20px;
+
+#copy {
+  font-size: 1.1rem;
+  padding: 10px 30px;
+  width: max-content;
+  margin: 20px auto 0;
+  background: #e50;
+  border-radius: 20px;
 }
-#copy.copied{
+
+#copy.copied {
   pointer-events: none;
-  opacity:.7;
+  opacity: .7;
 }
-#popupClose{
-  position:absolute;
-  width:40px;
-  height:40px;
+
+#popupClose {
+  position: absolute;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  border:3px solid #fff;
-  background:#123;
-  top:-18px;
-  right:-18px;
+  border: 3px solid #fff;
+  background: #123;
+  top: -18px;
+  right: -18px;
 }
+
 #popupClose::before,
-#popupClose::after{
-  content:"";
-  position:absolute;
-  width:80%;
-  height:10%;
+#popupClose::after {
+  content: "";
+  position: absolute;
+  width: 80%;
+  height: 10%;
   transform-origin: 50% 50%;
-  background:#fff;
-  top:45%;
-  left:10%;
+  background: #fff;
+  top: 45%;
+  left: 10%;
 }
-#popupClose::before{
-  transform:rotate(45deg);
+
+#popupClose::before {
+  transform: rotate(45deg);
 }
-#popupClose::after{
-  transform:rotate(-45deg);
+
+#popupClose::after {
+  transform: rotate(-45deg);
 }
 
 /* message */
 
-#message{
-  width:60%;
-  top:-10px;
-  left:20%;
-  height:max-content;
-  background:rgba(255,255,255,.2);
-  border:1px dashed #fff;
-  border-radius:20px;
+#message {
+  width: 60%;
+  top: -10px;
+  left: 20%;
+  height: max-content;
+  background: rgba(255, 255, 255, .2);
+  border: 1px dashed #fff;
+  border-radius: 20px;
   padding: 0 10px;
-  opacity:0;
-  transition:.3s;
+  opacity: 0;
+  transition: .3s;
   pointer-events: none;
 }
-#message.show{
-  opacity:1;
-  top:15px;
+
+#message.show {
+  opacity: 1;
+  top: 15px;
 }
 
-#message h4{
-  color:#fff;
-  font-size:1.2rem;
-  text-align:center;
-  line-height:1.8;
+#message h4 {
+  color: #fff;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 1.8;
 }
 
 .noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Old versions of Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hant-Tw">
+<html lang="zh-Hant-TW">
   <head>
     <meta charset="UTF-8" />
     <meta

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();
+
 }();