Comment adapter parfaitement une image d'arrière-plan à un div à l'aide de CSS ?

Ajuster l'image d'arrière-plan à un div

Lorsque vous placez une image d'arrière-plan dans un div, il est courant de rencontrer des problèmes de coupure de l'image. éteint ou ne s'ajuste pas correctement. Pour résoudre ce problème, CSS propose la propriété background-size, permettant un contrôle précis de la mise à l'échelle et du positionnement de l'image d'arrière-plan.

Mise à l'échelle de l'image d'arrière-plan pour l'adapter à l'intérieur de la Div

Pour garantir que l'image d'arrière-plan s'affiche dans les limites du div sans aucun recadrage, définissez la propriété background-size sur contain :

background-size: contain;

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

Alternativement, pour que l'image d'arrière-plan occupe la totalité de la div, redimensionnez-la à l'aide de cover :

background-size: cover;

Démonstration visuelle

Considérez le code HTML suivant avec un div contenant une image d'arrière-plan :

<div>

Pour éviter que l'image ne soit coupée, appliquez la propriété background-size :

#mainpage {
  background-size: contain;
}

Alternativement, pour que le l'image couvre toute la div :

#mainpage {
  background-size: cover;
}

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!