So ändern Sie die Bildgröße-HTML-Tutorial-php.cn

So ändern Sie die Bildgröße

不言

Freigeben： 2021-04-15 15:26:43

Original

216688 Leute haben es durchsucht

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.

So ändern Sie die Bildgröße

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>

Nach dem Login kopieren

Der Effekt ist wie folgt (das Originalbild ist 1072x768px):

So ändern Sie die Bildgröße

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>

Nach dem Login kopieren

Der Effekt ist wie folgt: Das Bild wurde ebenfalls auf 150x150px geändert

So ändern Sie die Bildgröße

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!