适应分辨率并裁剪为浏览器大小的全尺寸图像

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;

/* Change width and height to scale images */
      width: 100vw;
   height: auto;
}

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

图像悬停一 {图片1} 图像悬停二 {图片2}

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

Answer 1

此 CSS 代码使悬停图像覆盖整个屏幕，同时保持其纵横比。图像将根据需要进行裁剪，并在调整浏览器窗口大小时进行调整。容器使用固定定位和弹性对齐来实现居中显示，而 object-fit: cover 确保裁剪。

/* Apply this CSS to your hover-over images */
.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; /* This will hide any overflow when the image is larger than the screen */
}

.hover-image img {
    width: 100%; /* Make the image take the full width of the container */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover; /* Crop the image to cover the container while maintaining aspect ratio */
}

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