Full-size images that automatically adjust resolution based on browser size

Question

I have a shipping website.

How can I make my hover image fill the entire screen and be independent of my computer screen resolution. When I shrink the browser window, they should also crop and shrink. Thanks.

.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 scaled image */
      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}

I've tried using pixels, but that's resolution specific.

Answer 1

This CSS code causes the image on mouseover to cover the entire screen while maintaining its aspect ratio. The image will be cropped as needed and adjusted when the browser window is resized. The container uses fixed positioning and flex alignment for centered display, while object-fit: cover ensures cropping.

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