Comment puis-je étirer ou mettre à l'échelle une image d'arrière-plan CSS pour l'adapter à son conteneur ?

Comment étirer ou redimensionner un arrière-plan CSS pour l'adapter à son conteneur

Lors de la définition d'une image d'arrière-plan en CSS, vous souhaiterez peut-être qu'elle s'adapte parfaitement dans les dimensions du conteneur ou s'étirer pour couvrir toute la surface. CSS offre une solution simple pour obtenir cet effet.

Solution : utilisez la propriété background-size

CSS3 a introduit la propriété background-size, qui vous permet de spécifier le taille et mise à l'échelle des images d'arrière-plan. Pour étirer ou redimensionner un arrière-plan pour remplir son conteneur, utilisez la syntaxe suivante :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or other units */
}

La valeur 100 % indique que l'arrière-plan s'étendra sur toute la largeur de son conteneur, tandis que la valeur auto autorise la hauteur. pour s'ajuster automatiquement pour préserver le rapport hauteur/largeur d'origine de l'image.

Compatibilité

Cette solution est prise en charge par les navigateurs modernes depuis 2012, y compris Chrome, Firefox, Safari et Edge. Pour les navigateurs plus anciens, vous pouvez envisager d'utiliser des préfixes de fournisseur, tels que -webkit ou -moz, pour garantir la compatibilité.

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!