Heim > Artikel > Web-Frontend > So ändern Sie die Bildgröße
So ändern Sie die Bildgröße
- 不言Original
- 2019-01-09 17:40:33216816Durchsuche
So ändern Sie die Größe des Bildes: 1. Ändern Sie die Breite und Höhe im HTML-Tag, Code wie „img src="..." width="..." height=". .."> "; 2. Verwenden Sie CSS-Stile, um die Breiten- und Höhenattribute zu steuern.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5 und CSS3.
Wenn wir Webseiten entwerfen, stimmen die Bilder manchmal nicht mit der Größe überein. Wie können wir also die Bildgröße im Code ändern? In diesem Artikel erfahren Sie, wie Sie die Größe von Bildern ändern können.
Wir haben zwei Möglichkeiten, die Größe des Bildes zu ändern: Eine besteht darin, die Breite und Höhe innerhalb des HTML-Tags zu ändern; die andere besteht darin, CSS-Stile zu verwenden, um die Breiten- und Höhenattribute zu steuern.
Sehen wir uns zunächst Ändern der Bildbreite und -höhe innerhalb des HTML-Tags an
Verwenden Sie die Breite direkt im Bild Img-Tag- und Höhenattribute können die Breite und Höhe des Bildes steuern.
Der Code lautet wie folgt
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/tupian.jpg" style="max-width:90%" style="max-width:90%" alt="So ändern Sie die Bildgröße" > </body> </html>
Der Effekt ist wie folgt (das Originalbild ist 1072x768px):
Wir können das festlegen Breite und Höhe direkt im Bild-Tag eingeben, es wird intuitiv erscheinen.
Dann schauen wir uns anVerwendung von CSS-Stilen zur Steuerung der Breiten- und Höhenattribute
Wir verwenden das gleiche Bild, der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<img src="img/tupian.jpg" alt="So ändern Sie die Bildgröße" >
</body>
</html>Der Effekt ist wie folgt: Das Bild wurde ebenfalls auf 150x150px geändert
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!