Bilder in voller Größe, deren Auflösung automatisch an die Browsergröße angepasst wird

Question

Ich habe eine Versand-Website.

Wie kann ich dafür sorgen, dass mein Hover-Bild den gesamten Bildschirm ausfüllt und unabhängig von der Bildschirmauflösung meines Computers ist? Wenn ich das Browserfenster verkleinere, sollten sie auch zugeschnitten und verkleinert werden. Danke.

.hover-image {
   Anzeige: Flex;
   Position: fest;
   oben: 50 %;
   links: 50 %;
   transform: Translate(-50%, -50%);
   Z-Index: -1;
   Zeigerereignisse: keine;
   Flexrichtung: Spalte;
   align-items: center;
   rechtfertigen-Inhalt: Mitte;

/* Breite und Höhe in skaliertes Bild ändern */
      Breite: 100vw;
   Höhe: automatisch;
}

.hover-image img {
    maximale Breite: 100 % !important;
    maximale Höhe: 100 % !important;
    Breite: auto !important;
    Höhe: automatisch !important;
    Rand unten: 0;
}

Bild Hover Eins {Bild 1} Bild Hover Zwei {Bild 2}

Ich habe versucht, Pixel zu verwenden, aber das ist auflösungsabhängig.

Answer 1

这段CSS代码使得鼠标悬停时的图像覆盖整个屏幕，同时保持其宽高比。图像将根据需要进行裁剪，并在浏览器窗口调整大小时进行调整。容器使用固定定位和flex对齐方式进行居中显示，而object-fit: cover确保裁剪。

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