Comment définir les attributs de style img en utilisant CSS

Dans la conception Web, l'élément img est un élément très courant, utilisé pour insérer des images. Si vous souhaitez contrôler la position, la taille, l'espacement, l'alignement et d'autres attributs de l'image, vous pouvez utiliser CSS pour définir l'élément img. Ci-dessous, nous expliquerons comment définir les propriétés CSS de l'élément img.

1. Définissez la taille de l'image :

1. Définissez via les attributs de largeur et de hauteur

Vous pouvez définir la largeur et la hauteur de l'image via les attributs de largeur et de hauteur de CSS, par exemple :

img{
    width: 500px;
    height: 300px;
}

2. jusqu'à max -Paramètres des attributs largeur et hauteur maximale

Si vous souhaitez que l'image soit redimensionnée de manière adaptative en fonction de la largeur du conteneur tout en conservant le rapport hauteur/largeur, vous pouvez utiliser les attributs max-width et max-height, par exemple :

img{
    max-width: 100%;
    max-height: 100%;
}

De cette façon, quelle que soit la taille du conteneur, les images seront redimensionnées de manière adaptative tout en conservant le rapport hauteur/largeur et ne seront pas déformées.

2. Définissez l'image pour qu'elle soit centrée au centre :

1. Alignement central horizontal

Pour que l'image soit alignée au centre horizontalement, vous pouvez définir l'attribut d'affichage de l'élément img sur bloquer et utiliser la marge. attribut pour définir les marges gauche et droite sur auto, par exemple :

img{
    display: block;
    margin: 0 auto;
}

De cette façon, l'image sera alignée horizontalement et centrée.

2. Alignement vertical au centre

Pour aligner l'image verticalement au centre, vous pouvez utiliser la disposition flexbox ou l'attribut de position pour la définir. En prenant la disposition flexbox comme exemple, vous pouvez définir l'attribut display: flex sur le conteneur et utiliser l'attribut align-items pour définir l'alignement vertical du centre, par exemple :

.container{
    display: flex;
    align-items: center;
}
img{
    margin: 0 auto;
}

De cette façon, l'image sera alignée verticalement. au centre du conteneur.

3. Définir la marge de l'image :

Vous pouvez définir la marge de l'image via les propriétés de marge et de remplissage de CSS. Par exemple :

img{
    margin: 10px;
    padding: 5px;
}

De cette façon, l'image aura une marge de 10 pixels à l'extérieur et une marge de 5 pixels à l'intérieur.

4. Définissez la forme de l'image :

Si vous souhaitez modifier la forme de l'image, vous pouvez utiliser l'attribut border-radius pour définir le rayon du coin de l'image, par exemple :

img{
    border-radius: 50%;
}

Après avoir défini cet attribut, l'image deviendra circulaire.

5. Définissez le style du conteneur parent de l'image :

Si vous souhaitez définir le style du conteneur parent de l'image, vous pouvez utiliser le sélecteur CSS pour obtenir le conteneur parent, par exemple :

<div class="container">
    <img src="example.jpg">
</div>

.container{
    background-color: #f2f2f2;
    padding: 10px;
}

De cette façon, le conteneur parent de l’image aura une couleur d’arrière-plan et un espacement interne.

Résumé :

Après avoir compris comment utiliser les propriétés CSS ci-dessus, nous pouvons styliser de manière flexible l'élément img. La maîtrise de ces compétences peut nous aider à mieux contrôler l’effet d’affichage des images dans la conception Web.

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!