diff --git a/plugin/think-plugs-static/stc/public/static/login.js b/plugin/think-plugs-static/stc/public/static/login.js
index 4fdad59a4..523d9a33b 100644
--- a/plugin/think-plugs-static/stc/public/static/login.js
+++ b/plugin/think-plugs-static/stc/public/static/login.js
@@ -138,6 +138,7 @@ $(function () {
         let request = form.dataset.loginSlider || '';
         let check = form.dataset.loginCheck || '';
         let state = {
+            bgHeight: 0,
             bgWidth: 0,
             currentLeft: 0,
             dragging: false,
@@ -146,6 +147,7 @@ $(function () {
             originX: 0,
             pieceWidth: 100,
             required: false,
+            sourceHeight: 300,
             sourceWidth: 600,
             startLeft: 0,
             verified: false,
@@ -162,14 +164,22 @@ $(function () {
         function setPosition(left) {
             state.currentLeft = Math.max(0, Math.min(left, state.maxLeft));
             $handle.css('left', state.currentLeft + 'px');
-            $track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px');
+            $track.css('width', '0px');
             $piece.css('left', state.currentLeft + 'px');
         }
 
         function recalculate() {
+            let sourceWidth = Math.max(parseInt(state.sourceWidth, 10) || 600, 1);
+            let sourceHeight = Math.max(parseInt(state.sourceHeight, 10) || 300, 1);
+            let pieceWidth = Math.max(parseInt(state.pieceWidth, 10) || 100, 1);
             state.bgWidth = $stage.innerWidth();
+            if (state.bgWidth > 0) {
+                $stage.css('height', Math.round(state.bgWidth * sourceHeight / sourceWidth) + 'px');
+            }
+            state.bgWidth = $stage.innerWidth();
+            state.bgHeight = $stage.innerHeight();
             state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0);
-            $piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%');
+            $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px');
             setPosition(state.currentLeft);
         }
 
@@ -201,8 +211,9 @@ $(function () {
                     ret.data && ret.data.reload && reloadLoginPage();
                     return false;
                 }
-                state.sourceWidth = parseInt(ret.data.width || 600);
-                state.pieceWidth = parseInt(ret.data.piece_width || 100);
+                state.sourceWidth = parseInt(ret.data.width || 600) || 600;
+                state.sourceHeight = parseInt(ret.data.height || 300) || 300;
+                state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100;
                 state.loaded = true;
                 $uniqid.val(ret.data.uniqid || '');
                 $bg.attr('src', ret.data.bgimg || '');
diff --git a/public/static/login.js b/public/static/login.js
index 4fdad59a4..523d9a33b 100644
--- a/public/static/login.js
+++ b/public/static/login.js
@@ -138,6 +138,7 @@ $(function () {
         let request = form.dataset.loginSlider || '';
         let check = form.dataset.loginCheck || '';
         let state = {
+            bgHeight: 0,
             bgWidth: 0,
             currentLeft: 0,
             dragging: false,
@@ -146,6 +147,7 @@ $(function () {
             originX: 0,
             pieceWidth: 100,
             required: false,
+            sourceHeight: 300,
             sourceWidth: 600,
             startLeft: 0,
             verified: false,
@@ -162,14 +164,22 @@ $(function () {
         function setPosition(left) {
             state.currentLeft = Math.max(0, Math.min(left, state.maxLeft));
             $handle.css('left', state.currentLeft + 'px');
-            $track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px');
+            $track.css('width', '0px');
             $piece.css('left', state.currentLeft + 'px');
         }
 
         function recalculate() {
+            let sourceWidth = Math.max(parseInt(state.sourceWidth, 10) || 600, 1);
+            let sourceHeight = Math.max(parseInt(state.sourceHeight, 10) || 300, 1);
+            let pieceWidth = Math.max(parseInt(state.pieceWidth, 10) || 100, 1);
             state.bgWidth = $stage.innerWidth();
+            if (state.bgWidth > 0) {
+                $stage.css('height', Math.round(state.bgWidth * sourceHeight / sourceWidth) + 'px');
+            }
+            state.bgWidth = $stage.innerWidth();
+            state.bgHeight = $stage.innerHeight();
             state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0);
-            $piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%');
+            $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px');
             setPosition(state.currentLeft);
         }
 
@@ -201,8 +211,9 @@ $(function () {
                     ret.data && ret.data.reload && reloadLoginPage();
                     return false;
                 }
-                state.sourceWidth = parseInt(ret.data.width || 600);
-                state.pieceWidth = parseInt(ret.data.piece_width || 100);
+                state.sourceWidth = parseInt(ret.data.width || 600) || 600;
+                state.sourceHeight = parseInt(ret.data.height || 300) || 300;
+                state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100;
                 state.loaded = true;
                 $uniqid.val(ret.data.uniqid || '');
                 $bg.attr('src', ret.data.bgimg || '');