HTML <img> width-Eigenschaft

HTML <img> Tag

Definition und Verwendung

width Eigenschaft legt die Breite des Bildes in Pixeln fest.

Hinweis:dem Bild eine height und width Eigenschaft 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 Platz für das Bild behalten, daher ändert sich die Layout der Seite, wenn das Bild geladen wird. (Dieser Punkt wird im folgenden Abschnitt ausführlich erläutert).

Hinweis:Bitte verwenden Sie nicht height und width Eigenschaft verwendet wird, um das Bild zu skalieren. Wenn durch height und width Wenn die Eigenschaft verwendet wird, um das Bild zu verkleinern, muss der Benutzer große Bildgrößen herunterladen (selbst wenn das Bild auf der Seite klein aussieht). Der richtige Ansatz ist es, das Bild vor der Verwendung auf der Webseite durch Software in die passende Größe zu bearbeiten.

Weiterführende Informationen: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 width="pixels">

Attribute

Wert Beschreibung
pixels Geben Sie die Breite des Bildes in Pixeln an (z.B. width="100").

Mehr Beispiele

Bildgröße ändern - Füllbild erstellen

Die height- und width-Eigenschaften haben eine versteckte Eigenschaft, dass die tatsächliche Größe des Bildes nicht angegeben werden 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 die vorgesehene Fläche zu passen. Mit diesem Verfahren kann es sehr einfach Thumbnails für große Bilder und vergrößerte kleine Bilder erstellt werden. Es ist jedoch zu beachten: Der Browser muss immer 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 bei der Verwendung der height- und width-Eigenschaften ist es, sehr einfach den Ausfüllungsbereich der Seite zu realisieren und gleichzeitig die Leistung des Dokuments zu verbessern. Stellen Sie sich vor, Sie möchten in einem Dokument einen farbigen horizontalen Streifen platzieren. 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 height- und width-Eigenschaften auf eine größere Größe erweitern.

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

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

Verwendung von Prozentsätzen

Ein weiterer Trick bei der Verwendung der width-Eigenschaft 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 horizontaler Streifen mit der gleichen Breite wie das Displayfenster und einer Höhe von 30 Pixeln so realisiert 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, wird der Browser bei Vergrößerung oder Verkleinerung die Breitenausrichtung 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 Prozentsatz der width-Attribut des Bildes ct_1px.gif eingestellt 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:Wir bieten Ihnen die obigen Beispiele, um Ihnen das Verständnis der Verwendung der height- und width-Attribute zu erleichtern. Wenn Sie nur eine große Fläche aus reinem Farbblock benötigen, um die Seite zu dekorieren, dann ist es besserVerwenden Sie CSS, um den Hintergrundfarbe zu erstellen.

Detaillierte Erklärung der height- und width-Attribute

Warum sollten height- und width-Attribute verwendet werden

Haben Sie schon einmal erlebt, dass der Inhalt des Dokuments unregelmäßig bewegt wird, wenn es lädt? Der Grund dafür ist, dass der Browser, um jedes geladene Bild anzuzeigen, ständig das Layout der Seite neu einrichtet. Der Browser entscheidet durch das Herunterladen und Auswerten der Breite und Höhe der Bilder über die Größe der Bilder und lässt dann einen entsprechenden Rechteckraum im Anzeigefenster zurück. Dann richtet der Browser das Layout der Seite neu ein, um das Bild in die Anzeige einzufügen. Dies zeigt uns auch, dass Bilder unabhängige Dateien sind und sie sind alle unabhängig geladen.

Dies ist jedoch nicht die effizienteste Methode zur Anzeige des Dokuments, da der Browser vor der Anzeige des nächsten und des folgenden Dokumentinhalts jeden Bilddatei überprüfen und ihren Bildschirmraum berechnen muss. Dies kann eine sehr lange Verzögerung bei der Anzeige des Dokuments verursachen und das Lesen des Benutzers stören.

Für die Schöpfer ist eine effizientere Methode, die Größe der Bilder durch die height- und width-Attribute des <img>-Tags zu spezifizieren. Auf diese Weise lässt der Browser vor dem Herunterladen der Bilder einen Raum für sie vor, was die Anzeige des Dokuments beschleunigen kann und das Verschieben des Inhalts des Dokuments verhindern kann. Beide Attribute müssen Ganzzahlen sein und in Pixeln die Größe des Bildes darstellen. Die Reihenfolge der Erscheinung dieser Attribute im <img>-Tag ist irrelevant.

Problem der height- und width-Attribute

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 knifflige negative Effekte. Selbst wenn der Benutzer die Funktion zum automatischen Herunterladen von Bildern deaktiviert hat, zeigt der Browser immer noch den für das Bild vorgesehenen Raum in der angegebenen Größe an. Dies hinterlässt in der Regel für den Leser eine leere Rahmen, in dem sich ein bedeutungsloses Symbol befindet, das anzeigt, dass dies der Platz für das Bild ist. In diesem Fall sieht die Seite sehr schlecht aus, als ob sie nicht fertig ist, und der Großteil des Inhalts ist nutzlos. Verwendet man nicht diese spezifischen Größen, so platziert der Browser nur ein Bildsymbol im Text, so dass zumindest noch einige Texte lesbar sind.

Für dieses Problem haben wir noch keine Lösung, können aber nur betonen, dass Sie darauf achten sollten, dies zu verwenden. alt Attribut undBeschreibende TexteSo weiß der Leser zumindest, was hier fehlt. Wir empfehlen dennoch, diese Größenattribute zu verwenden, da wir alles unterstützen, was die Netzwerkleistung verbessert.

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML <img> Tag