HTML <img> height-Eigenschaft

HTML <img> Tag

Definition und Verwendung

Höhe Eigenschaft fest, die die Höhe des Bildes in Pixeln angibt.

Hinweis:Stellen Sie immer die Höhe und width-EigenschaftWenn Breite und Höhe festgelegt sind, wird beim Laden der Seite der erforderliche Raum für das Bild vorgelassen. Andernfalls weiß der Browser nicht, wie groß das Bild ist, und kann daher keinen angemessenen Raum dafür reservieren. Dies führt dazu, dass die Seitenausrichtung während des Ladevorgangs ändert (wenn das Bild geladen wird).

Hinweis:verwendet Höhe und Breite Das Verkleinern eines großen Bildes zwingt den Benutzer, das große Bild herunterzuladen (selbst wenn es auf der Seite sehr klein aussieht). Um dies zu vermeiden, verwenden Sie bitte Bildbearbeitungssoftware, um die Größe des Bildes vor der Verwendung auf der Seite neu zu kalibrieren.

Erweiternde Lektüre:Detaillierte Erklärung der height- und width-Attribute

Beispiel

Ein Bild mit einer Höhe von 600 Pixeln und einer Breite von 500 Pixeln:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Probieren Sie es selbst aus

Syntax

<img height="pixels">

Attributwert

Wert Beschreibung
pixels Die Höhe des Bildes in Pixeln angeben (z.B. height="100").

Mehr Beispiele

Bildgröße ändern - Füllbild erstellen

Die Eigenschaften height und width haben eine versteckte Eigenschaft, dass man die tatsächliche Größe des Bildes nicht angeben muss, d.h. diese Werte können größer oder kleiner als die tatsächliche Größe sein. Der Browser passt das Bild automatisch an, um die vorgesehene Raumgröße anzupassen. Mit diesem Verfahren kann man leicht Miniaturansichten für große Bilder erstellen und sehr kleine Bilder vergrößern. Aber man muss beachten: Der Browser muss trotzdem die gesamte Datei herunterladen, egal wie groß die endgültige Anzeigegröße ist, und wenn das ursprüngliche Breiten- und Höhenverhältnis nicht beibehalten wird, wird das Bild verzerrt.

Eine weitere Technik für die Verwendung der Eigenschaften height und width ist die einfache Füllung eines Bereichs auf der Seite, gleichzeitig kann die Leistung des Dokuments verbessert werden. Stellen Sie sich vor, Sie möchten einen farbigen Querstreifen in das Dokument einfügen. Sie müssen nicht ein Bild mit vollständiger Größe erstellen, sondern nur ein Bild mit einer Breite und Höhe von einem Pixel erstellen und der gewünschten Farbe zuweisen. Dann können Sie es mit den Eigenschaften height und width auf eine größere Größe erweitern.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Dies ist die Wirkung des obigen HTML-Textes, dieser farbige Streifen wurde aus einem Bild mit nur einem Pixel hergestellt:

Verwendung von Prozentsätzen

Ein weiterer Trick, um die Eigenschaft width zu verwenden, ist die Verwendung von Prozentsätzen anstelle von absoluten Pixelwerten. Dies lässt den Browser das Bild im Verhältnis zur Größe des Browserfensters skalieren. Daher kann ein farbiger Querstreifen mit der gleichen Breite wie das Anzeigefenster und einer Höhe von 30 Pixeln so realisiert werden:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Wenn sich die Größe des Dokumentenfensters ändert, ändert sich auch die Größe dieses Bildes:

Hinweis:Wenn ein Wert in Form eines Prozentsatzes für die Breite bereitgestellt wird und die Höhe ignoriert wird, wird der Browser bei der Vergrößerung oder Verkleinerung das Breitenausmaß des Bildes beibehalten. Dies bedeutet, dass das Verhältnis von Höhe zu Breite nicht verändert wird und das Bild nicht verzerrt wird.

Bitte schauen Sie unten im HTML nach:

<img src="/i/ct_1px.gif"} width="20%" />

Das bedeutet, dass wenn nur der Percent-Wert der width-Eigenschaft des Bildes ct_1px.gif gesetzt wird, ein rechteckiges Bild erhalten wird (denn das ursprüngliche ct_1px.gif ist ein rechteckiges Bild mit einer Breite und Höhe von 1px):


Probieren Sie es selbst aus

Hinweis:Der Zweck der obigen Beispiele ist es, Ihnen ein besseres Verständnis für die Verwendung der height- und width-Attribute zu vermitteln. Wenn Sie nur große farbige Blöcke benötigen, um die Seite zu dekorieren, ist es besserVerwenden Sie CSS, um den Hintergrundfarbe zu erstellen.

Detaillierte Erklärung der height- und width-Attribute

Warum sollten die height- und width-Attribute verwendet werden

Haben Sie schon einmal gesehen, wie der Inhalt eines Dokuments beim Laden unregelmäßig bewegt wird? Dies geschieht, weil der Browser, um jedes geladene Bild anzuzeigen, ständig das Layout der Seite neu anpasst. Der Browser lädt und analysiert die Breite und Höhe der Bilder, um ihre Größe zu bestimmen, und lässt dann einen entsprechenden Rechteckplatz im Anzeigefenster zurück. Dann passt der Browser das Layout der Seite an, um das Bild in die Anzeige einzufügen. Dies zeigt uns auch, dass Bilder独立的 Dateien sind und dass sie beide unabhängig vom Quelldatei geladen werden.

Dies ist jedoch nicht die effektivste Methode zur Anzeige von Dokumenten, da der Browser vor der Anzeige der benachbarten und folgenden Dokumentinhalte jedes Bilddatei überprüfen und ihren Bildschirmplatz berechnen muss. Dies kann eine sehr große Verzögerung bei der Anzeige des Dokuments verursachen und das Lesen des Benutzers unterbrechen.

Für Ersteller ist eine effektivere Methode, die Größe der Bilder durch die height- und width-Attribute des <img>-Tags zu bestimmen. Auf diese Weise lässt der Browser vor dem Herunterladen des Bildes einen Platz für das Bild vor, was die Anzeige des Dokuments beschleunigen kann und das Verschieben des Dokumentinhalts verhindern kann. Beide Attribute müssen Ganzzahlen sein und in Pixeln die Bildgröße angeben. Die Reihenfolge der beiden Attribute im <img>-Tag ist irrelevant.

Probleme mit den height- und width-Attributen

Obwohl die height- und width-Attribute des <img>-Tags die Leistung verbessern und Ihnen einige kleine Tricks ermöglichen, gibt es bei ihrer Verwendung auch einige heikle negative Effekte. Selbst wenn der Benutzer die automatische Herunterladefunktion der Bilder deaktiviert hat, zeigt der Browser immer noch den für das Bild vorgesehenen Raum in der angegebenen Größe an. Dies hinterlässt oft einem Leser eine leere Leiste, in der ein bedeutungsloses Symbol steht, das anzeigt, dass sich hier ein Bild befinden sollte. In diesem Fall sieht die Seite sehr schlecht aus, als ob sie nicht fertig ist, und der Großteil des Inhalts ist nutzlos. Wenn keine angegebenen Größen verwendet werden, platziert der Browser nur ein Bildsymbol im Text, so dass mindestens noch etwas Lesbares zu lesen ist.

For this issue, we do not have a solution yet, but we can emphasize one point, that is, to use it. alt Attribute and someDescriptive TextSo that the reader at least knows what is missing here. We still recommend that you use these size attributes, as we encourage all behaviors that can improve web performance.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <img> Tag