<p>Saya mempunyai tapak web penghantaran. </p> <p>Bagaimana saya boleh menjadikan imej tuding saya memenuhi keseluruhan skrin dan bebas daripada resolusi skrin komputer saya. Apabila saya mengecilkan tetingkap penyemak imbas, ia juga harus memangkas dan mengecut. terima kasih. </p> <pre class="brush:php;toolbar:false;">.hover-image { paparan: flex; kedudukan: tetap; atas: 50%; kiri: 50%; mengubah: terjemah(-50%, -50%); indeks-z: -1; pointer-events: tiada; flex-direction: lajur; align-item: tengah; justify-content: pusat; /* Tukar lebar dan tinggi kepada imej berskala */ lebar: 100vw; ketinggian: auto; } .hover-image img { lebar maksimum: 100% !penting; ketinggian maks: 100% !penting; lebar: auto !penting; ketinggian: auto !penting; margin-bawah: 0; }</pre> Imej Tuding Satu {imej 1} Imej Tuding Dua {imej 2} <p>Saya telah cuba menggunakan piksel, tetapi itu adalah resolusi khusus. </p>

/* 将此CSS应用于您的鼠标悬停图像 */
.hover-image {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden; /* 当图像大于屏幕时，这将隐藏任何溢出部分 */
}

.hover-image img {
    width: 100%; /* 使图像占据容器的整个宽度 */
    height: auto; /* 保持宽高比 */
    object-fit: cover; /* 裁剪图像以覆盖容器并保持宽高比 */
}

<img src="https://picsum.photos/200/300" class="hover-image">