Comment puis-je redimensionner une image d'arrière-plan proportionnellement pour l'adapter à la largeur de la page ?

Mise à l'échelle proportionnelle des images d'arrière-plan : préservation de la largeur et réglage automatique de la hauteur

Image d'arrière-plan adaptée à la largeur, mise à l'échelle automatique de la hauteur

Pour obtenir l'effet souhaité là où la largeur d'une image d'arrière-plan correspond à la largeur de la page tandis que sa hauteur évolue automatiquement, nous pouvons tirer parti de la propriété background-size de CSS3. En le définissant sur cover, nous demandons au navigateur de redimensionner l'image à la plus petite taille où la largeur et la hauteur couvrent entièrement la zone de positionnement de l'arrière-plan.

Implémentation du code

Voici l'extrait de code CSS à implémentez cet effet :

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  /* Optional, center the image */
}

Comme amélioration supplémentaire, nous pouvons utiliser des arguments facultatifs pour background-postion pour centrer l'image verticalement et horizontalement.

Eggsplanation pour contenir et couvrir

Pour faire la lumière sur la différence entre contenir et couvrir, utilisons un exemple :

Contenir :

L'image est contenue dans la zone de positionnement d'arrière-plan, laissant un espace vide rempli de la couleur d'arrière-plan.

Couverture :

< ;img src="https://i.sstatic.net/p96P5.png" alt="Couverture exemple">

L'image couvre entièrement la zone de positionnement, mais certaines parties peuvent être recadrées.

Conclusion

En utilisant background-size: cover, vous pouvez créer une image d'arrière-plan réactive qui s'adapte automatiquement à la largeur de la page tout en conservant ses proportions. Cette technique permet de réaliser des designs fluides et visuellement attrayants qui s'adaptent à différentes tailles d'écran.

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!