I handwritten a magnifying glass, but the proportion didn't match and I couldn't find anything wrong.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            border: 2px solid -sharpeee;
            width: 400px;
            height: 400px;
            box-shadow: 5px 10px 10px 3px -sharpccc;
            position: relative;
            float: left;
        }
        .box {
            width: 180px;
            height: 180px;
            background: yellow;
            opacity: 0.4;
            /*display: none;*/
            position: absolute;
        }
        .scale {
            width: 450px;
            height: 450px;
            border: 2px solid -sharpb3b3b3;
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
        .big-image{
            /*overflow: hidden;*/
            position: absolute;
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="container">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" width="100%" height="100%">
    <div class="box"></div>
</div>
<div class="scale">
    <img class="big-image" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" alt="" width="100%" height="100%">
</div>
<script>
    let container = document.querySelector(".container");
    let box = document.querySelector(".box");
    let scale = document.querySelector(".scale");

    let bigImage = document.querySelector(".big-image"); // 
    let percent = scale.offsetHeight / box.offsetHeight; // :
    bigImage.width = bigImage.offsetWidth * percent;
    bigImage.height = bigImage.offsetHeight * percent;

    container.onmouseover = () => {
        box.style.display = "block";

        container.onmousemove = e => {
            let x = e.clientX;
            let y = e.clientY;


            box.style.left = x  - box.offsetWidth / 2 + "px";
            box.style.top = y  - box.offsetHeight / 2 + "px";

            if(box.offsetLeft <= 0) {
                box.style.left = 0;
            }
            if(box.offsetTop <= 0) {
                box.style.top = 0;
            }

            if (container.offsetWidth - box.offsetLeft < box.offsetWidth) {
                box.style.left = container.offsetWidth - box.offsetWidth + "px";
            }
            if (container.offsetHeight - box.offsetTop < box.offsetHeight) {
                box.style.top = container.offsetHeight - box.offsetHeight + "px";
            }

            bigImage.style.left = -box.offsetLeft * percent + "px";
            bigImage.style.top = -box.offsetTop * percent + "px";
;        }

    };
    container.onmouseout = () => {
        box.style.display = "none";
    };
</script>
</body>
</html>
Source code paste can be run directly, God help me take a look, I am really dazzled ~