Imej bersaiz penuh yang melaraskan resolusi secara automatik berdasarkan saiz penyemak imbas

Question

Saya mempunyai tapak web penghantaran.

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.

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

Imej Tuding Satu {imej 1} Imej Tuding Dua {imej 2}

Saya telah cuba menggunakan piksel, tetapi itu adalah resolusi khusus.

Answer 1

Kod CSS ini menjadikan imej pada tetikus menutupi keseluruhan skrin sambil mengekalkan nisbah bidangnya. Imej akan dipangkas mengikut keperluan dan dilaraskan apabila tetingkap penyemak imbas diubah saiznya. Bekas menggunakan kedudukan tetap dan penjajaran lentur untuk paparan berpusat, manakala padanan objek: penutup memastikan pemangkasan.

/* 将此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">