Comment obtenir un effet non étirant des images en CSS

En CSS, vous pouvez définir les propriétés de l'image d'arrière-plan pour obtenir l'effet de non-étirement de l'image. Nous utilisons généralement les deux méthodes suivantes :

Méthode 1 : background-size

Utilisez l'attribut background-size pour définir la taille de l'image d'arrière-plan. Vous pouvez spécifier la largeur et la hauteur de l'image d'arrière-plan, ou vous pouvez utiliser la couverture. ou contain pour s'adapter à la taille de l'image d'arrière-plan. Lors de l'utilisation de la couverture, l'image d'arrière-plan est étirée pour remplir toute la largeur et la hauteur de l'élément, mais ne se déforme pas. Lors de l'utilisation de contain, l'image d'arrière-plan conservera sa taille d'origine dans l'élément tout en remplissant l'élément au maximum.

Par exemple, le code suivant peut définir l'image d'arrière-plan à une taille fixe sans l'étirer :

div {
  background-image: url("example.jpg");
  background-size: 300px 200px;
}

Méthode 2 : background-position

Utilisez la propriété background-position pour définir la position de l'image d'arrière-plan, où la valeur peut être des valeurs de pixels spécifiques ou des positions relatives, telles que le centre, le haut, etc. Si nous positionnons l'image d'arrière-plan au centre de l'élément, l'image d'arrière-plan ne s'étirera pas, quelle que soit la façon dont l'élément change de taille.

Par exemple, le code suivant définit l'image d'arrière-plan au centre de l'élément :

div {
  background-image: url("example.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

Utilisez les deux méthodes ci-dessus pour obtenir une image d'arrière-plan sans étirement en CSS. Vous pouvez choisir la méthode spécifique qui vous convient en fonction de la situation réelle.

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!