Peralihan CSS: saiz latar belakang tidak berfungsi

Question

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.

Beginilah rupa HTML saya:

 

  

 
 
MALEV Cessna c172 HA-SJX (G1000)
 Muat turun


还有我的 CSS：
: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 */
}

我尝试寻找解决方案，他们都说按照我的方式去做。这会将背景图像们都说按照我的方式去做。这会将背景图像美小美政渡不起作用。
我还尝试更改 div，使其在 div 内有一个图像标签，但这也不起作用。

Answer 1

Ternyata peralihan tidak berfungsi untuk automatik dan beberapa sifat lain (override, include, waris, initial, unset). Penyelesaian yang saya temui adalah menggunakan JavaScript menggunakan kod berikut:

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;
};

Mula-mula saya mengira nisbah untuk mengetahui jumlah skala imej apabila ia tidak dilegarkan di atasnya. Saya perlu melepasi nilai ini yang digunakan dalam acara div 中创建一个新属性 bgSize 并将其存储在那里，来存储要在 onmouseleave. < /p>

Saya kemudian menggunakan acara onmouseenter 和 onmouseleave untuk menukar saiz imej apabila melayang di atasnya.

Saya juga mengalih keluar pemilih :hover dalam fail css kerana ia kini tidak digunakan lagi.