Die height- und width-Attribute des HTML <img>-Tags
Beispiel
Setzen Sie die Breite und Höhe des Bildes auf 200 Pixel:
<img src="/i/mouse.jpg" height="200" width="200" />
Definition und Verwendung
Der <img>-Tag setzt die Abmessungen des Bildes mit den Attributen height und width fest.
Hinweis:Die Angabe von height und width für ein Bild ist eine gute Gewohnheit. Wenn diese Eigenschaften gesetzt sind, kann für das Bild beim Laden der Seite Platz vorgesehen werden. Ohne diese Eigenschaften kann der Browser die Größe des Bildes nicht erkennen und keinen angemessenen Raum für das Bild reservieren, sodass sich die Layout der Seite ändert, wenn das Bild geladen wird. (Dieser Punkt wird im folgenden Abschnitt ausführlich erläutert).
Hinweis:Biegen Sie das Bild nicht durch die Eigenschaften height und width. Wenn das Bild durch die Eigenschaften height und width verkleinert wird, muss der Benutzer große Bildgrößen herunterladen (selbst wenn das Bild auf der Seite sehr klein aussieht). Die richtige Vorgehensweise ist, das Bild vor seiner Verwendung auf der Webseite durch Software in die geeignete Größe zu bearbeiten.
Erweiterndes Lesen:Erklärung der height- und width-Attribute
Mehr Beispiele
Bildgröße ändern - Erstellen von Füllbildern
Die Eigenschaften height und width haben eine versteckte Eigenschaft, dass man die tatsächliche Größe des Bildes nicht angeben muss, das heißt, diese Werte können größer oder kleiner als die tatsächliche Größe sein. Der Browser passt das Bild automatisch an, um in diesen vorgesehenen Raum zu passen. Mit diesem Verfahren kann man leicht Thumbnails für große Bilder erstellen und sehr kleine Bilder vergrößern. Zu beachten ist jedoch: Der Browser muss immer die gesamte Datei herunterladen, unabhängig davon, wie groß die endgültige Anzeigegröße ist, und ohne das Verhältnis von Breite zu Höhe beizubehalten, wird das Bild verzerrt.
Eine weitere Technik zur 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 in einem Dokument einen farbigen Querstreifen platzieren. Sie müssen nicht ein Bild mit der vollständigen Größe erstellen, sondern nur ein Bild mit einer Breite und Höhe von einem Pixel erstellen und der gewünschten Farbe zuweisen. Dann erweitern Sie es mit den Eigenschaften height und width auf eine größere Größe.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Dies ist die Wirkung dieses HTML-Textes, dieser Farbstreifen 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 einer Breite, die der Breite des Displayfensters entspricht und einer Höhe von 30 Pixeln, so erstellt werden:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Wenn die Größe des Dokumentenfensters geändert wird, ändert sich auch die Größe dieses Bildes:
Hinweis:Wenn ein Wert in Form eines Prozentsatzes für die Breite angegeben wird und die Höhe ignoriert wird, hält der Browser sowohl bei Vergrößerung als auch bei Verkleinerung das Verhältnis von Breite zu Höhe des Bildes bei. Dies bedeutet, dass das Verhältnis von Höhe zu Breite des Bildes nicht verändert wird und das Bild nicht verzerrt wird.
Sehen Sie sich das folgende HTML an:
<img src="/i/ct_1px.gif" width="20%" />
Das bedeutet, wenn nur der prozentuale Wert der width-Eigenschaft von image ct_1px.gif gesetzt wird, erhalten Sie ein rechteckiges Bild (denn das ursprüngliche ct_1px.gif ist ein Rechteck mit einer Breite und Höhe von 1px):
Hinweis:Sie können unsere Online-TestwerkzeugeProbieren Sie es selbst aus!
Hinweis:Der Zweck der angegebenen Beispiele ist es, Ihnen ein besseres Verständnis für die Verwendung der height- und width-Attribute zu vermitteln. Wenn Sie nur große reine Farblücken benötigen, um die Seite zu dekorieren, ist es besser,Verwenden Sie CSS, um den Hintergrundfarbe zu erstellen.
Browser-Unterstützung
Alle Browser unterstützen die height- und width-Attribute.
Syntax
<img height="value" />
oder:
<img width="value" />
Attributwert
| Wert | Beschreibung |
|---|---|
| pixels | Höhe oder Breite in Pixeln. |
| percent | Höhe oder Breite in Prozent des enthaltenen Elements. |
TIY-Beispiel
- Bildgröße anpassen
- Dieses Beispiel zeigt, wie man Bilder in verschiedene Größen anpasst.
Erklärung der height- und width-Attribute
Warum height- und width-Attribute verwenden?
Haben Sie jemals erlebt, wie der Inhalt eines Dokuments unregelmäßig bewegt wird, wenn es geladen wird? Der Grund dafür ist, dass der Browser ständig das Layout der Seite anpasst, um jedes geladene Bild anzuzeigen. 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 Rechteckbereich im Anzeigefenster freihalten. Anschließend passt der Browser das Layout der Seite an, um das Bild in die Anzeige einzufügen. Dies zeigt uns auch, dass Bilder unabhängige Dateien sind und sowohl als auch einzeln geladen werden.
Dies ist jedoch nicht die effektivste Methode zur Anzeige eines Dokuments, da der Browser vor der Anzeige der benachbarten und folgenden Dokumentenelemente jede Bilddatei überprüfen und ihren Bildschirmplatz berechnen muss. Dies kann eine sehr lange Verzögerung bei der Anzeige des Dokuments verursachen und das Lesen des Benutzers unterbrechen.
Für die Ersteller ist eine effektivere Methode, die Größe der Bilder durch die height- und width-Attribute des <img>-Tags festzulegen. Auf diese Weise lässt der Browser vor dem Herunterladen der Bilder Platz für sie reservieren, was die Anzeige des Dokuments beschleunigen und das Verschieben des Inhalts des Dokuments verhindern kann. Beide Attribute müssen Ganzzahlen sein und die Bildgröße in Pixeln angeben. Die Reihenfolge der Erscheinung dieser Attribute im <img>-Tag ist irrelevant.
The problem with the height and width attributes
Although the height and width attributes of the <img> tag can improve performance and allow you to implement some small tricks, there are still some tricky negative effects when using them. Even if the user has turned off the automatic download of images, the browser still needs to display the space reserved for the image in the specified size. And usually this leaves the reader with an empty frame, with a meaningless icon, indicating the position where the image should be placed. At this point, the page will look very bad, as if it has not been completed at all, and most of the content is useless. If you do not use these specified sizes, the browser will only place an image icon in the text, at least leaving some text to read in the display.
For this issue, we do not have a solution yet, but we can emphasize one point, that is to use alt Attributeand someDescriptive TextThis way, the reader at least knows what is missing here. We still recommend that you use these size properties, as we encourage any behavior that can improve web performance.
