Das IMG-Element kann mit CSS gestaltet werden. Die Einstellungsmethode ist: 1. Legen Sie die Größe des IMG über Attribute wie CSS-Breite fest. 2. Verwenden Sie das Border-Attribut von CSS, um dem IMG-Bild einen Rahmen hinzuzufügen. Legen Sie das Bild als Link fest, indem Sie das Tag „a“ setzen. 4. Verwenden Sie das Attribut „text-align“, um die horizontale Ausrichtung des Bildes usw. festzulegen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Empfohlen: CSS-Video-Tutorial
1. CSS steuert die Größe des IMG-Bildes
<!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>Der obige Code legt die Länge und Breite des IMG-Bildes auf 120 Pixel bzw. 100 Pixel fest.
Es ist jedoch zu beachten, dass die Verwendung von CSS zum groben Festlegen der Bildgröße zu Verformungen führen kann.
Wenn Sie nicht möchten, dass das Bild deformiert wird, achten Sie auf das Seitenverhältnis des Bildes.
2. Fügen Sie dem Bild einen Rand hinzu.
In der tatsächlichen Anwendung kann dem Bild ein Randeffekt hinzugefügt werden.
Dies kann mithilfe des CSS-Border-Attributs erreicht werden.
Das Codebeispiel lautet wie folgt:
<!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>Der obige Code fügt dem IMG-Bild einen blauen Rand mit einer Breite von 2 Pixeln hinzu.
Weitere Informationen zu Rändern finden Sie im Kapitel „CSS-Rahmen“.
3. Das IMG-Bild wird als Link verwendet
Das Bild wird als Link verwendet, das heißt, platzieren Sie es in .
Das Codebeispiel lautet wie folgt:
<!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>Der obige Code fügt das Bild in den Link ein, und durch Klicken darauf kann die Sprungaktion ausgeführt werden.
Es ist wichtig zu beachten, dass das Bild möglicherweise unnötige Ränder enthält, wenn Sie es in den Link einfügen. Fügen Sie einfach border:none hinzu.
4. Legen Sie die horizontale Ausrichtung des Bildes fest.
Legen Sie einfach die horizontale Mittelausrichtung des Bildes fest. Das Codebeispiel lautet wie folgt:
<!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>Verwenden Sie das text-align-Attribut, um die horizontale Ausrichtung festzulegen das Bild.
Es ist zu beachten, dass dieses Attribut auf den IQ des Containerelements des Bildes festgelegt wird, nicht auf das Bildelement selbst.
5. Vertikale Ausrichtung von Bildern festlegen
Ein allgemeiner Code wird unten als Demonstration verwendet.
Das Textfeld und der Bestätigungscode sollten normalerweise horizontal ausgerichtet sein, um sie schöner zu machen.
Das Codebeispiel lautet wie folgt:
<!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>Der obige Code kann den vertikalen Ausrichtungseffekt des Textfelds und des Bestätigungscodes erzielen.
Der Kerncode lautet wie folgt:
div img{
vertical-align:middle
}Der obige Code sollte auf dem Bildelement selbst festgelegt werden.
Das obige ist der detaillierte Inhalt vonKann ich CSS für IMG-Elemente verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
