Puis-je utiliser CSS pour les éléments img ?-Questions et réponses frontales-php.cn

Puis-je utiliser CSS pour les éléments img ?

藏色散人

Libérer： 2022-12-30 11:11:28

original

3212 Les gens l'ont consulté

L'élément img peut être stylisé en utilisant CSS. La méthode de paramétrage est la suivante : 1. Définissez la taille de l'img via des attributs tels que la largeur CSS. 2. Utilisez l'attribut border de CSS pour ajouter une bordure à l'img ; image ; 3. Définissez la balise a sur Définir l'image comme lien ; 4. Utilisez l'attribut text-align pour définir l'alignement horizontal de l'image, etc.

Puis-je utiliser CSS pour les éléments img ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

1. CSS contrôle la taille de l'image img

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
  width:120px;
  height:100px;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>

Copier après la connexion

Les ensembles de codes ci-dessus la longueur de l'image img. Les largeurs sont respectivement de 120 px et 100 px.

Cependant, il convient de noter que l'utilisation de CSS pour définir approximativement la taille de l'image peut provoquer une déformation.

Si vous ne souhaitez pas que l'image soit déformée, faites attention au rapport hauteur/largeur de l'image.

2. Ajouter une bordure à l'image img

Dans l'application réelle, un effet de bordure peut être ajouté à l'image.

Ceci peut être réalisé en utilisant l'attribut CSS border.

L'exemple de code est le suivant :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:220px;
    height:100px;
    border:2px solid blue;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>

Copier après la connexion

Le code ci-dessus ajoute une bordure bleue d'une largeur de 2px à l'image img.

Pour plus d'informations sur les bordures, veuillez vous référer au chapitre sur les bordures CSS.

3. L'image img est utilisée comme lien

L'image est utilisée comme lien, c'est-à-dire qu'elle est placée dans .

L'exemple de code est le suivant :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:40px;
    height:20px;
    border:2px solid blue;
    border:none;
}
</style> 
</head> 
<body> 
<a href="#"><img src="mytest/div+css/border.jpg"/></a>>
</body> 
</html>

Copier après la connexion

Le code ci-dessus place l'image dans le lien , et cliquez pour réaliser l'action de saut.

Il est important de noter que lorsque vous insérez l'image dans le lien, l'image peut avoir des bordures inutiles. Ajoutez simplement border:none.

4. Définissez l'alignement horizontal de l'image

Définissez simplement l'alignement central horizontal de l'image à titre d'exemple. L'exemple de code est le suivant :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
div{
  width:300px;
  height:300px;
  text-align:center;
  background-color:#ccc;
}
img{
  width:100px;
  height:100px;
}
</style> 
</head> 
<body> 
<div><img src="mytest/div+css/border.jpg"/></div>
</body> 
</html>

Copier après la connexion

Utiliser les propriétés text-align peuvent être utilisées pour définir l'alignement horizontal des images.

Il convient de noter que cet attribut est défini sur l'élément conteneur de l'image, et non sur l'élément image lui-même.

5. Définir l'alignement vertical des images

Un code commun est utilisé comme démonstration ci-dessous.

La zone de texte et le code de vérification sont généralement alignés horizontalement, ce qui est plus beau.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div img{ 
  vertical-align:middle
}
input{
  height:52px;
}
</style>
</head>
<body>
<div><input type="text"/><img src="mytest/demo/1.jpg"></div>
</body>
</html>

Copier après la connexion

Le code ci-dessus peut obtenir l'effet d'alignement vertical de la zone de texte et du code de vérification.

Le code de base est le suivant :