So ändern Sie die Bildgröße in HTML

So ändern Sie die Bildgröße in HTML: Erstellen Sie zunächst eine HTML-Beispieldatei. Erstellen Sie dann ein Bild über img. Legen Sie schließlich die Größe des Bildes über die Attribute „Höhe“ und „Breite“ fest.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5-Version, DELL G3-Computer

Wie ändere ich die Bildgröße in HTML?

Die Höhen- und Breitenattribute des Tags legen die Abmessungen des Bildes fest.

Tipp: Es empfiehlt sich, Höhen- und Breitenattribute für Bilder anzugeben. Wenn diese Eigenschaften festgelegt sind, kann beim Laden der Seite Platz für Bilder reserviert werden. Ohne diese Attribute kann der Browser die Abmessungen des Bildes nicht verstehen und keinen geeigneten Platz für das Bild reservieren, sodass sich das Layout der Seite ändert, wenn das Bild geladen wird. (Diese Idee wird weiter unten ausführlich erläutert).

Tipp: Bitte skalieren Sie das Bild nicht über Höhen- und Breitenattribute. Wenn das Bild über die Attribute „Höhe“ und „Breite“ verkleinert wird, muss der Benutzer das größere Bild herunterladen (auch wenn das Bild auf der Seite klein aussieht). Der richtige Ansatz besteht darin, dass das Bild vor der Verwendung auf der Webseite mithilfe einer Software auf die entsprechende Größe gebracht werden sollte.

Bildgröße ändern – gefüllte Bilder erstellen

Die Eigenschaften „Höhe“ und „Breite“ haben eine versteckte Eigenschaft, dass man die tatsächliche Größe des Bildes nicht angeben muss, das heißt, diese beiden Werte können größer oder größer sein kleiner als die tatsächliche Größe. Der Browser passt die Bildgröße automatisch an, damit sie in diesen reservierten Bereich passt. Mit dieser Methode ist es einfach, Miniaturansichten für große Bilder zu erstellen und sehr kleine Bilder zu vergrößern. Aber seien Sie gewarnt: Der Browser muss immer noch die gesamte Datei herunterladen, unabhängig von der endgültigen Anzeigegröße, und das Bild wird verzerrt, wenn das ursprüngliche Verhältnis von Breite und Höhe nicht beibehalten wird.

Eine weitere Technik, die die Attribute „Höhe“ und „Breite“ nutzt, besteht darin, das Ausfüllen des Seitenbereichs sehr einfach zu gestalten und gleichzeitig die Leistung des Dokuments zu verbessern. Stellen Sie sich vor, Sie möchten einen farbigen horizontalen Balken in Ihrem Dokument platzieren. Sie müssen kein Bild in voller Größe erstellen; Sie erstellen stattdessen ein Bild mit einer Breite von 1 Pixel und einer Höhe und geben ihm die Farbe, die Sie verwenden möchten. Verwenden Sie dann die Eigenschaften „Höhe“ und „Breite“, um es auf eine größere Größe zu erweitern.

<img  src="/static/imghw/default1.png"  data-src="/i/ct_1px.gif"  class="lazy"      style="max-width:90%" height="30px" / alt="So ändern Sie die Bildgröße in HTML" >

Das ist der Effekt des obigen HTML. Dieser Farbbalken wird aus einem Bild mit nur einem Pixel erstellt:

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildgröße in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!