How to display only the center of the image in the img tag in HTML (three methods)

<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg"
     style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">

<style type="text/css">
        img {
            background-image: url(upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//Set the background image background-repeat: no-repeat;//The background image will only be displayed once.
            background-attachment: scroll;//
            background-position: -50px 0px;//Set the offset of the background image. This -50 is equivalent to the background being offset 50 to the left as a whole, so that the center of the image can be displayedbackground-size: 300px 200px;////Set the size of the background image, which is equivalent to the actual width and height of the image being proportionally scaledbackground-color: transparent;//
            width: 200px;//
            height: 200px;//
        }
    </style>

<div style="width: 100px;height: 100px;overflow: hidden">
<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" style="position: relative" id="img_id">
</div>
<script>
    var img = document.getElementById("img_id");
    var image = new Image();
    var realWidth = 0; //Store the actual width of the image var realHeight = 0; //Store the actual height of the image //Get the width and height of the image image.src = "upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg";
    //Processing of successful loading image.onload = function () {
        realWidth = image.width; //Get the actual width of the image realHeight = image.height; //Get the actual height of the image //Let the width and height of img be proportional to the actual width and height of the image, and then offset if (realWidth > realHeight){
            img.width = (100/realHeight)*realWidth; //Proportional scaling width img.height = 100; //Consistent with div height img.style.left = '-' + ((100/realHeight)*realWidth-100)/2 + 'px'; //Set the image's relative position offset to half the width-height of the img tag }else if (realWidth < realHeight){
            img.width = 100 ; // same height as div img.height = (100/realWidth)*realHeight; //proportional scaling height img.style.top = '-' + ((100/realWidth)*realHeight-100)/2 + 'px'; //set the image's relative position offset to half the height-width of the img tag }else {
            img.width = 100;
            img.height = 100;
        }
    };
    //Processing of image loading failure img.onerror = function () {
        img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492076382452&di=04ebd6c4688b2ffbd8ae18e685234704&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D0c96dc86da33c895a62b907fe4235fc6%2F0823dd54564e9258d2bb2dff9f82d158ccbf4e17.jpg";
        img.width = 100;
        img.height = 100;
    }
</script>