Images en taille réelle qui ajustent automatiquement la résolution en fonction de la taille du navigateur

Question

J'ai un site Web d'expédition.

Comment puis-je faire en sorte que mon image de survol remplisse tout l'écran et soit indépendante de la résolution de l'écran de mon ordinateur. Lorsque je réduis la fenêtre du navigateur, elle doit également être recadrée et réduite. Merci.

.hover-image {
   affichage : flexible ;
   poste : fixe ;
   haut : 50 % ;
   gauche : 50 % ;
   transformer : traduire (-50 %, -50 %);
   indice z : -1 ;
   événements de pointeur : aucun ;
   direction flexible : colonne ;
   aligner les éléments : centre ;
   justifier-contenu : centre ;

/* Change la largeur et la hauteur pour mettre une image à l'échelle */
      largeur : 100vw ;
   hauteur : automatique ;
}

.hover-image img {
    largeur maximale : 100 % !important ;
    hauteur maximale : 100 % !important;
    largeur : auto !important;
    hauteur : auto !important;
    marge inférieure : 0 ;
}
Image survolée un
{image1}
Image survolée deux
{image2}
J'ai essayé d'utiliser des pixels, mais cela dépend de la résolution. 
            

Answer 1

Ce code CSS permet à l'image au survol de la souris de couvrir tout l'écran tout en conservant son rapport hauteur/largeur. L'image sera recadrée si nécessaire et ajustée lorsque la fenêtre du navigateur sera redimensionnée. Le conteneur utilise un positionnement fixe et un alignement flexible pour un affichage centré, tandis que le couvercle ajusté à l'objet assure le recadrage.

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