根据浏览器大小自动调整分辨率的全尺寸图像

Question

我有一个货运网站。

如何使我的悬停图片填满整个屏幕，并且不受计算机屏幕分辨率的影响。当我缩小浏览器窗口时，它们还应该进行裁剪和缩小。谢谢。

.hover-image {
   display: flex;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;
   pointer-events: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;

/* 将宽度和高度更改为缩放图像 */
      width: 100vw;
   height: auto;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Image Hover One {image 1} Image Hover Two {image 2}

我尝试过使用像素，但那是特定于分辨率的。

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">