Comment puis-je créer une image d'arrière-plan CSS à l'échelle adaptée sans problèmes de recadrage ou d'alignement ?

Image d'arrière-plan CSS réactive avec mise à l'échelle proportionnelle

Les images d'arrière-plan en CSS peuvent souvent être difficiles à utiliser, en particulier lorsque vous souhaitez qu'elles soient mises à l'échelle de manière réactive pour s'adapter à différentes tailles d'écran. et maintenir le bon rapport hauteur/largeur. Explorons comment obtenir cet effet à l'aide de la propriété background-size.

Problème : problèmes de recadrage et d'alignement

Lors de la spécification d'une image d'arrière-plan avec background: url(), vous pouvez rencontrer des problèmes liés à recadrage et alignement. Firefox peut donner la priorité à la mise à l'échelle de la hauteur, ce qui entraîne un recadrage vertical, tandis que Chrome peut centrer l'image au lieu de la répéter.

Solution : background-size: cover

Pour résoudre ces problèmes, nous pouvons utiliser l'option propriété background-size en conjonction avec la valeur de couverture :

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

Compatibilité :
Vérifiez la compatibilité de la propriété background-size ici : [CSS Tricks](https://css-tricks.com/css3-background-size/)

Expliquer contain et cover

La valeur de couverture met à l'échelle la image d'arrière-plan à la plus petite taille qui couvre complètement la zone de positionnement de l'arrière-plan, en conservant son rapport hauteur/largeur. Cela garantit que l'image remplit tout l'espace sans aucune zone vide ou recadrée.

En revanche, la valeur contain redimensionne l'image à la plus grande taille qui s'adapte à la zone de positionnement d'arrière-plan tout en préservant ses proportions. Cela peut entraîner un espace vide autour de l'image.

Démonstration visuelle

Considérez une image 4x3 utilisée comme arrière-plan pour un écran 16x9.

contient :

• L'image s'adapte à l'écran sans recadrage, mais il y a un espace vide au-dessus et en dessous.

couverture :

• L'image est mise à l'échelle pour couvrir tout l'écran verticalement, tout en recadrant les côtés.

Pour une démonstration plus détaillée, consultez ce code extrait :

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the div.</p>
</div>

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!