Comment puis-je adapter une image d'arrière-plan à un div sans recadrage ?

Ajustement des images d'arrière-plan aux divs

Pour afficher une image d'arrière-plan dans un div sans la recadrer, utilisez la propriété background-size. En fonction du résultat souhaité, vous pouvez choisir de redimensionner l'image pour qu'elle s'adapte au div ou pour couvrir l'intégralité du div.

Mise à l'échelle de l'image d'arrière-plan pour l'adapter au div

Si vous souhaitez redimensionner l'image d'arrière-plan de manière à ce qu'elle reste entièrement visible dans le div, définissez la propriété background-size sur contain.

background-size: contain;

Mise à l'échelle de l'image d'arrière-plan pour couvrir la div

Alternativement, si vous souhaitez que l'image d'arrière-plan couvre la totalité de la div, utilisez la taille d'arrière-plan propriété définie sur couverture.

background-size: cover;

Exemples

Voici quelques exemples pour illustrer les effets de ces paramètres :

<div>

• Avec arrière-plan -size : contain;, l'image sera réduite pour s'adapter au div, en préservant ses proportions.
• Avec background-size : cover ;, l'image sera étirée pour couvrir la totalité de la div, ce qui pourrait déformer son rapport hauteur/largeur.

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!