<p>Saya sedang membangunkan tapak web di mana apabila anda menuding pada imej ia mengezum keluar supaya anda boleh melihat keseluruhan imej tanpa perlu mengezum keluar terlalu banyak untuk melihat latar belakang div. </p> <p>Beginilah rupa HTML saya: </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="tajuk">MALEV Cessna c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" muat turun="MALEV Cessna c172 HA-SJX (G1000)">Muat turun</a> </div> </pra> <p>还有我的 CSS：</p> <pre class="brush:css;toolbar:false;">:root { --saiz-img: 350px; --button-margin: 20px; --biru-gelap: #070b21; --biru: #10184a; --biru muda: #00d1ff; } div#wrapper { kedudukan: relatif; margin: auto; jidar bawah: 100px; warna latar belakang: var(--biru-gelap); lebar: var(--img-size); } div#imgDiv { kedudukan: relatif; text-align: tengah; warna: merah; padding: 0; margin: 0; warna latar belakang: var(--biru-gelap); limpahan: tersembunyi; ketinggian: var(--img-size); } div#imgDiv div#transitionDiv { latar belakang-kedudukan-x: 50%; ketinggian: 100%; lebar: 100%; saiz latar belakang: auto var(--img-size); background-repeat: tidak-ulang; -webkit-transition: saiz latar belakang 1500ms mudah; -moz-transition: saiz latar belakang 1500 mudah; -o-peralihan: saiz latar belakang 1500 mudah; -ms-transition: saiz latar belakang 1500ms mudah; peralihan: saiz latar belakang 1500ms mudah; } div#imgDiv:hover div#transitionDiv { latar belakang-kedudukan-y: 50%; saiz latar belakang: var(--img-size) auto; } p#title { limpahan: tersembunyi; ketinggian: 38px; jidar: 30px; paparan: -webkit-box; -pengapit talian-webkit: 2; -webkit-box-orient: menegak; } div#designs div a { paparan: blok; text-align: tengah; hiasan teks: tiada; background-color: var(--light-blue); warna: putih; saiz fon: 40px; font-family: "Montserrat", sans-serif; margin: var(--button-margin); padding: 0px; lebar: calc(100% - 2 * var(--butang-margin)); jejari sempadan: 15px; peralihan: 0.5s; } div#designs div a#no-link { warna latar belakang: kelabu; } div#designs div a:hover { warna latar belakang: dodgeblue; /* menggunakan warna rawak buat masa ini */ } div#designs div a:active { warna latar belakang: biru; /* menggunakan warna rawak buat masa ini */ } </pra> <p>我尝试寻找解决方案，他们都说按照我的方式去做。这会将背景图像们都说按照我的方式去做。这会将背景图像美小美政渡不起作用。</p> <p>我还尝试更改 div，使其在 div 内有一个图像标签，但这也不起作用。</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;
};