Comment définir une image img en CSS

Les styles CSS sont utilisés pour contrôler la présentation des éléments de la page Web, notamment le texte, les images, les couleurs, la mise en page, etc. Lorsque vous souhaitez définir une image sur une page Web, vous devez utiliser CSS pour contrôler la taille, la position, la bordure, l'arrière-plan et d'autres attributs de l'image. Aujourd'hui, nous allons expliquer comment utiliser CSS pour définir des images img.

1. Définir la taille de l'image

Pour définir la taille de l'image en CSS, vous pouvez utiliser les attributs width et height. Par exemple, pour définir la largeur d'une image à 200 pixels et la hauteur à 150 pixels, vous écririez :

img {
  width: 200px;
  height: 150px;
}

Cela rendra toutes les balises img d'une taille de 200x150 pixels.

Si une seule des propriétés est définie, l'image conservera sa mise à l'échelle d'origine. Par exemple :

img {
  width: 200px;
}

Cela rendra la largeur de l'image à 200 pixels et la hauteur sera mise à l'échelle proportionnellement.

2. Définir la bordure de l'image

Vous pouvez utiliser l'attribut border pour définir la bordure de l'image en CSS. Par exemple, pour définir la bordure d'une image sur rouge et 2 pixels de large, vous pouvez écrire :

img {
  border: 2px solid red;
}

Cela ajoutera une bordure rouge à toutes les balises img d'une largeur de 2 pixels. L'effet est comme indiqué ci-dessous :

.

3. Définir les coins arrondis de l'image

Pour définir les coins arrondis de l'image en CSS, vous pouvez utiliser l'attribut border-radius. Par exemple, pour définir l'arrondi des quatre coins d'une image avec un rayon de 10 pixels, vous pouvez écrire :

img {
  border-radius: 10px;
}

Cela arrondira les quatre coins de toutes les balises img.

Si vous souhaitez définir uniquement un certain coin à arrondir, vous pouvez écrire comme ceci :

img {
  border-top-left-radius: 10px;
}

Cela arrondira le coin supérieur gauche et gardera les autres coins droits.

4. Définir l'arrière-plan de l'image

Pour définir l'arrière-plan de l'image en CSS, vous pouvez utiliser l'attribut background. Par exemple, pour changer l'arrière-plan d'une image en gris, vous pouvez écrire :

img {
  background: gray;
}

Cela rendra l'arrière-plan de toutes les balises img gris.

Si vous souhaitez uniquement modifier la couleur d'arrière-plan de la partie centrale de la bordure de l'image, vous pouvez utiliser l'attribut background-color avec l'attribut border. Par exemple :

img {
  border: 2px solid red;
  background-color: gray;
}

Cela changera la couleur d'arrière-plan au milieu de la bordure de l'image en gris.

5. Définir la position de l'image

Pour définir la position de l'image en CSS, vous pouvez utiliser les attributs margin et padding. Par exemple, pour définir la marge d'une image à 20 pixels, vous écrivez :

img {
  margin: 20px;
}

Cela fera que toutes les balises img seront à 20 pixels de leur environnement.

Si vous souhaitez modifier l'espacement entre l'image et les éléments environnants, vous pouvez utiliser l'attribut padding. Par exemple, pour définir le remplissage d'une image à 10 pixels, vous écrivez :

img {
  padding: 10px;
}

Cela gardera toutes les balises img à 10 pixels des éléments environnants.

Pour résumer, nous pouvons contrôler les images dans les pages Web via des styles CSS, notamment la taille, la position, la bordure, l'arrière-plan et d'autres attributs. La définition de styles d’image peut rendre les pages Web plus belles et plus faciles à lire pour les lecteurs.

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!