根據瀏覽器大小自動調整解析度的全尺寸影像

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