Maison >interface Web >tutoriel CSS >Comment faire en sorte qu'une image d'arrière-plan s'adapte parfaitement à un DIV ?

Comment faire en sorte qu'une image d'arrière-plan s'adapte parfaitement à un DIV ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-20 20:06:111119parcourir

How to Make a Background Image Fit Perfectly Inside a DIV?

Ajuster un arrière-plan d'image à un DIV

Vous souhaitez qu'une image d'arrière-plan s'affiche entièrement dans un DIV, mais une partie de l'image est étant coupé. Pour résoudre ce problème, envisagez d'utiliser la propriété background-size, prise en charge par la plupart des navigateurs modernes.

Pour une image d'arrière-plan qui évolue proportionnellement pour s'adapter au DIV :

background-size: contain;

Pour une image d'arrière-plan qui s'étend pour couvrir entièrement la DIV, obscurcissant des parties de l'image si nécessaire :

background-size: cover;

Voici un exemple utilisant background-size : contain :

<div>

Et un exemple utilisant background-size : cover:

<div>

Maintenant, votre image d'arrière-plan s'affichera entièrement dans le DIV, quel que soit sa taille ou son rapport hauteur/largeur d'origine .

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn