Comment agrandir les images d'arrière-plan dans Mobile Safari sans utiliser « background-size : cover » ?

Agrandissement des images d'arrière-plan dans Safari mobile sans utiliser CSS background-size: cover

Alors que CSS background-size: cover est couramment utilisé pour agrandir images d'arrière-plan, certains scénarios, en particulier sur les appareils iOS, peuvent présenter des défis. L'un de ces problèmes consiste à étendre les images d'arrière-plan pour couvrir des div dont la largeur peut varier en fonction de la taille de la fenêtre d'affichage et de la hauteur du contenu.

La principale cause de ce problème n'est pas background-size: cover mais plutôt background-attachment: corrigé. Cette propriété empêche l'image d'arrière-plan de bouger avec le contenu de la page, créant ainsi un comportement indésirable sur les appareils mobiles.

Pour résoudre ce problème, envisagez d'utiliser une requête multimédia pour cibler spécifiquement les appareils iPhone et définissez la propriété background-attachment pour faire défiler. . Cela permet à l'image d'arrière-plan de défiler avec la page, résolvant ainsi efficacement le problème.

Voici un exemple de code CSS avec une requête multimédia qui cible les appareils iPhone :

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

En incorporant ceci media query, vous pouvez vous assurer que vos images d'arrière-plan s'étendront non seulement pour couvrir l'intégralité du div, mais s'adapteront également gracieusement aux différentes tailles de fenêtre d'affichage sur les ordinateurs de bureau et les appareils mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!