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{display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;flex -direkti

P粉322106755 · Answer

这段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; /* 裁剪图像以覆盖容器并保持宽高比 */
}