SOURCE

function autoAdjustImage(maxWidth, maxHeight, imgObj) {
    var img = new Image();
    img.src = imgObj.src;
    
    var hRatio;
    var wRatio;
    var ratio = 1;
    var w = img.width;
    var h = img.height;

    wRatio = maxWidth / w;
    hRatio = maxHeight / h;

    if (maxWidth == 0 && maxHeight == 0) {
        ratio = 1;
    } else if (maxWidth == 0) {
        if (hRatio<1) ratio = hRatio;
    } else if (maxHeight == 0) {
        if (wRatio < 1) ratio = wRatio;
    } else if (wRatio < 1 || hRatio < 1) {
        ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }

    if (ratio < 1) {
        w = w * ratio;
        h = h * ratio;
    }

    imgObj.height = h;
    imgObj.width = w;

    // 左上角570,126，右下角830,182
    var box_ = document.getElementById("box");
    box_.style.position = "absolute";
    box_.style.border = "2px solid #ff0000";
    box_.style.backgroundColor = "transparent";
    box_.style.left = Math.floor(570 * ratio) + "px";
    box_.style.top = Math.floor(126 * ratio) + "px";
    box_.style.width = Math.floor((830 - 570) * ratio) + "px";
    box_.style.height = Math.floor((182 - 126) * ratio) + "px";
}

<div class="wrapper" id="container">
     <img onload="autoAdjustImage(400, 400, this)" src="https://img.chinacourt.org/ptr/original/629/236629.jpg?imgid=236629" />
     <div id="box"></div>
</div>

.wrapper {
    position:relative;
}

.box {
    position:absolute;
    top:570px;
    left:126px;
    width:260px;
    height:56px;
    border:2px solid #ff0000;
    background-color:transparent
}