So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg"
     Stil = "Position: absolut; Clip: Rechteck (0px, 250px, 200px, 50px); Breite: 300px; Höhe: 200px">

<style type="text/css">
        img {
            background-image: url(upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//Hintergrundbild festlegen background-repeat: no-repeat;//Das Hintergrundbild wird nur einmal angezeigt.
            Hintergrundanhang: scrollen;//
            background-position: -50px 0px;//Legt den Versatz des Hintergrundbildes fest. Diese -50 entsprechen einem gesamten Hintergrund, der 50 nach links versetzt ist, damit die Bildmitte angezeigt werden kannbackground-size: 300px 200px;////Legt die Größe des Hintergrundbildes fest, die der tatsächlichen Breite und Höhe des Bildes entspricht, die proportional skaliert wirdbackground-color: transparent;//
            Breite: 200px;//
            Höhe: 200px;//
        }
    </Stil>

<div style="Breite: 100px;Höhe: 100px;Überlauf: versteckt">
<img src="upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" style="position: relativ" id="img_id">
</div>
<Skript>
    var img = document.getElementById("img_id");
    var image = neues Bild();
    var realWidth = 0; //Die tatsächliche Breite des Bildes speichern var realHeight = 0; //Die tatsächliche Höhe des Bildes speichern //Breite und Höhe des Bildes abrufen image.src = "upload/2022/web/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg";
    //Verarbeitung des erfolgreichen Ladens image.onload = function () {
        realWidth = image.width; //Die tatsächliche Breite des Bildes abrufen realHeight = image.height; //Die tatsächliche Höhe des Bildes abrufen //Lass die Breite und Höhe von img proportional zur tatsächlichen Breite und Höhe des Bildes sein und verschiebe dann, wenn (realWidth > realHeight){
            img.width = (100/realHeight)*realWidth; //Proportionale Skalierungsbreite img.height = 100; //Konsistent mit Div-Höhe img.style.left = '-' + ((100/realHeight)*realWidth-100)/2 + 'px'; //Setze den relativen Positionsversatz des Bildes auf die halbe Breite-Höhe des img-Tags }else if (realWidth < realHeight){
            img.width = 100; // gleiche Höhe wie div img.height = (100/realeBreite)*realeHöhe; // proportionale Skalierungshöhe img.style.top = '-' + ((100/realeBreite)*realeHöhe-100)/2 + 'px'; // setze den relativen Positionsversatz des Bildes auf die halbe Höhe-Breite des img-Tags }else {
            Bildbreite = 100;
            Bildhöhe = 100;
        }
    };
    //Verarbeitung von Bildladefehlern 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“;
        Bildbreite = 100;
        Bildhöhe = 100;
    }
</Skript>