HTMLのimgタグで画像の中心部分だけを表示する方法（3つの方法）

<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg"
     スタイル="位置: 絶対;クリップ: rect(0px,250px,200px,50px);幅: 300px;高さ: 200px">

<スタイル タイプ="text/css">
        画像 {
            background-image: url(upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//背景画像を設定します。background-repeat: no-repeat;//背景画像は1回だけ表示されます。
            背景添付: スクロール;//
            background-position: -50px 0px;//背景画像のオフセットを設定します。この -50 は、背景全体が左に 50 オフセットされ、画像の中心が表示されることを意味しますbackground-size: 300px 200px;////背景画像のサイズを設定します。これは、比例して拡大縮小される画像の実際の幅と高さに相当しますbackground-color: transparent;//
            幅: 200px;//
            高さ: 200px;//
        }
    </スタイル>

<div スタイル="幅: 100px;高さ: 100px;オーバーフロー: 非表示">
<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" スタイル="position: relative" id="img_id">
</div>
<スクリプト>
    var img = document.getElementById("img_id");
    var image = 新しい Image();
    var realWidth = 0; //画像の実際の幅を保存します var realHeight = 0; //画像の実際の高さを保存します //画像の幅と高さを取得します image.src = "upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg";
    //読み込み成功の処理 image.onload = function () {
        realWidth = image.width; //画像の実際の幅を取得します。realHeight = image.height; //画像の実際の高さを取得します。//imgの幅と高さを画像の実際の幅と高さに比例させ、オフセットします。if (realWidth > realHeight){
            img.width = (100/realHeight)*realWidth; // 比例スケーリング幅 img.height = 100; // div の高さと一致する img.style.left = '-' + ((100/realHeight)*realWidth-100)/2 + 'px'; // 画像の相対位置オフセットを img タグの幅と高さの半分に設定する }else if (realWidth < realHeight){
            img.width = 100; // div と同じ高さ img.height = (100/realWidth)*realHeight; // 比例スケーリングの高さ img.style.top = '-' + ((100/realWidth)*realHeight-100)/2 + 'px'; // 画像の相対位置オフセットを img タグの高さと幅の半分に設定 }else {
            画像の幅 = 100;
            高さ = 100;
        }
    };
    //画像読み込み失敗の処理 img.onerror = function () {
        画像サイズ: 1000x400px;
        画像の幅 = 100;
        高さ = 100;
    }
</スクリプト>