<p>J'ai un site Web d'expédition. </p> <p>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. </p> <pre class="brush:php;toolbar:false;">.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 ; }</pré> Image survolée un {image1} Image survolée deux {image2} <p>J'ai essayé d'utiliser des pixels, mais cela dépend de la résolution. </p>

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