Comment puis-je conserver les proportions lors de la définition d'images d'arrière-plan évolutives en CSS ?

Images d'arrière-plan évolutives : conserver les proportions

Dans la conception Web, définir une image d'arrière-plan qui s'adapte parfaitement aux dimensions de la page peut être un tâche délicate. Souvent, les développeurs rencontrent des problèmes d’étirement ou de recadrage disproportionné de l’image, ce qui entraîne des résultats indésirables. Cependant, CSS3 fournit une solution élégante à ce problème avec la propriété background-size.

La propriété background-size vous permet de spécifier la taille de votre image d'arrière-plan de différentes manières. Pour conserver les proportions de votre image tout en vous assurant qu'elle correspond aux dimensions de votre élément de corps, utilisez la valeur de couverture.

En définissant la taille d'arrière-plan sur couvrir, l'image sera automatiquement mise à l'échelle à la taille la plus petite possible qui soit complètement couvre la zone de positionnement en arrière-plan. Cela signifie que l'image remplira toujours toute la largeur de la page, tandis que sa hauteur s'ajuste pour conserver les proportions d'origine.

Par exemple, considérons le code suivant :

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

Ce CSS assurez-vous que l'image background.svg s'adapte à toute la largeur de la page, tandis que sa hauteur évolue en conséquence pour conserver ses proportions intactes.

Comprendre Contenir vs. Cover

En CSS3, il existe deux valeurs principales pour la propriété background-size : contain et cover. Bien que les deux valeurs conservent le rapport hauteur/largeur de l'image, elles se comportent différemment.

• contain : redimensionne l'image à la plus grande taille possible qui s'adapte complètement à la zone de positionnement de l'arrière-plan. Cela signifie que certaines zones en dehors de l'image peuvent rester vides.
• couverture : redimensionne l'image à la taille la plus petite possible qui recouvre complètement la zone de positionnement de l'arrière-plan. Cela peut entraîner le recadrage de certaines zones de l'image.

Un moyen utile de visualiser la différence entre contenir et couvrir est d'imaginer un rectangle représentant votre écran et un rectangle représentant votre image.

• contenir : le rectangle de l'image s'adaptera à l'intérieur du rectangle de l'écran, laissant éventuellement un espace vide autour de lui.
• couverture : le rectangle de l'image s'agrandira pour remplir le rectangle de l'écran, potentiellement couper des parties de l'image.

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!