<p>Ich entwickle eine Website, auf der das Bild verkleinert wird, wenn Sie mit der Maus über ein Bild fahren, sodass Sie das gesamte Bild sehen können, ohne zu stark verkleinern zu müssen, um den Hintergrund des Divs zu sehen. </p> <p>So sieht mein HTML aus: </p> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <div id="imgDiv"> <div id="transitionDiv" style="background-image: url("../resources/models/HA-SJX.JPG");"></div> </div> <p id="title">MALEV Cessna c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Download</a> </div> </pre> <p>还有我的 CSS:</p> <pre class="brush:css;toolbar:false;">:root { --img-size: 350px; --button-margin: 20px; --dark-blue: #070b21; --blue: #10184a; --light-blue: #00d1ff; } div#wrapper { Position: relativ; Rand: automatisch; Rand unten: 100px; Hintergrundfarbe: var(--dark-blue); Breite: var(--img-size); } div#imgDiv { Position: relativ; Textausrichtung: Mitte; Farbe Rot; Polsterung: 0; Rand: 0; Hintergrundfarbe: var(--dark-blue); Überlauf versteckt; Höhe: var(--img-size); } div#imgDiv div#transitionDiv { Hintergrundposition-x: 50 %; Höhe: 100 %; Breite: 100 %; Hintergrundgröße: auto var(--img-size); Hintergrundwiederholung: keine Wiederholung; -webkit-transition: Hintergrundgröße 1500 ms Leichtigkeit; -moz-transition: Hintergrundgröße 1500 Leichtigkeit; -o-transition: Hintergrundgröße 1500; -ms-transition: Hintergrundgröße 1500 ms Leichtigkeit; Übergang: Hintergrundgröße 1500 ms Leichtigkeit; } div#imgDiv:hover div#transitionDiv { Hintergrundposition-y: 50 %; Hintergrundgröße: var(--img-size) auto; } p#title { Überlauf versteckt; Höhe: 38px; Rand: 30px; Anzeige: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertikal; } div#designs div a { Bildschirmsperre; Textausrichtung: Mitte; Textdekoration: keine; Hintergrundfarbe: var(--light-blue); Farbe weiß; Schriftgröße: 40px; Schriftfamilie: „Montserrat“, serifenlos; Rand: var(--button-margin); Polsterung: 0px; width: calc(100% - 2 * var(--button-margin)); Randradius: 15px; Übergang: 0,5 s; } div#designs div a#no-link { Hintergrundfarbe: grau; } div#designs div a:hover { Hintergrundfarbe: Dodgerblue; /* verwende vorerst eine zufällige Farbe */ } div#designs div a:active { Hintergrundfarbe: blau; /* verwende vorerst eine zufällige Farbe */ } </pre> <p>过渡不起作用.</p> <p>

img.onload = function () {
    let height = img.naturalHeight;
    let width = img.naturalWidth;
    let ratio = height / width;
    img.surroundingDiv.bgSize = "" + ((1 / ratio) * 100) + "%";
    img.surroundingDiv.style.backgroundSize = this.surroundingDiv.bgSize;
};

transitionDiv.style.backgroundImage = "url(" + img.src + ")";
transitionDiv.onmouseenter = function () {
    this.style.backgroundSize = 100 + "%";
};
    
transitionDiv.onmouseleave = function () {
    this.style.backgroundSize = this.bgSize;
};