In HTML die Breite und Höhe eines Bilds festlegen

PDF download PDF herunterladen
PDF download PDF herunterladen

Hier zeigen wir dir eine Anleitung zur Einrichtung der Höhe und Breite eines Bilds in HTML (HyperText Markup Language).

  • Das Attribut width gibt die Breite eines Bilds in Pixeln an.
  • Das Attribut height gibt die Höhe eines Bilds in Pixeln an.
  • In HTML 4.01 kann die Höhe in Pixeln oder in Prozent des enthaltenden Elements angegeben werden. In HTML5 muss der Wert in Pixeln angegeben werden.

Vorgehensweise

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dies könnte bspw. standard.html sein.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • <img src="imagefile.jpg" alt="Bild" height="42" width="42">
    • src ist der Pfad auf deine Datei.
    • alt ist der Tag, den du dem Bild gibst.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Als Beispiel height="19" width="20"
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das width-Attribut wird von allen großen Browsern wie bspw. Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer unterstützt.
    Werbeanzeige

Tipps

  • Gib bei Bildern immer sowohl die Höhe als auch die Breite an. Wenn diese festgelegt sind, wird der für das Bild erforderliche Platz beim Laden der Seite reserviert. Ohne diese Attribute kennt der Browser allerdings die Größe des Bilds nicht und kann nicht den nötigen Platz reservieren. Die Auswirkung davon ist, dass sich das Layout der Seite während des Ladens ändert (während die Bilder geladen werden).
  • Das Verkleinern eines großen Bilds mit den Attributen height und width zwingt einen Benutzer zum Download des großen Bilds (selbst wenn es auf der Seite klein aussieht). Um dies zu vermeiden, solltest du das Programm vor der Verwendung auf einer Seite skalieren.
Werbeanzeige

Verwandte wikiHows

Eine Zeitverzögerung in eine Batch Datei einfügen
Leerzeichen in HTML einfügen
Mit der Windows Kommandozeile eine Python Datei ausführen
In HTML ein Bild zentrieren
In HTML die Hintergrundfarbe festlegen
Eine HTML Datei ausführen
Eine HTML Seite erstellen
Ein C Programm mit dem GNU Compiler (GCC) kompilieren
Eine einfache Webseite mit HTML gestalten
Ein eigenes Betriebssystem entwickeln
Ein Programm entwickeln
DLL Dateien erstellen
In Assembly programmieren lernen
HTML in Word umwandeln
Werbeanzeige

Referenzen

  1. http://www.w3schools.com/ - Hier findest du alle Informationen über HTML.

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 19.359 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige