Maison > Article > interface Web > Puis-je utiliser CSS pour les éléments img ?
Puis-je utiliser CSS pour les éléments img ?
- 藏色散人original
- 2021-01-11 09:26:053213parcourir
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.
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>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>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 3499910bf9dac5ae3c52d5ede7383485.
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>Le code ci-dessus place l'image dans le lien 3499910bf9dac5ae3c52d5ede7383485, 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>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>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 :
div img{
vertical-align:middle
}Le code ci-dessus doit être défini sur l'élément d'image lui-même.
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!