In HTML Bilder skalieren - so geht's

Breite und Höhe mit HTML festlegen

Für ein Bild eine bestimmte Breite und Höhe festzulegen, funktioniert schnell und einfach mit dem HTML-Tag "img“.

1. Öffnen Sie dazu Ihre HTML-Datei, in der Sie das Bild einfügen möchten oder in der sich bereits das Bild, das Sie skalieren wollen, befindet.
2. Gehen Sie nun im Quelltext zu der Stelle, wo das Bild angezeigt wird oder werden soll.
3. Geben Sie dann den folgenden Code ein:
   <img src"pfadzurdatei" alt="bildtitel" title="bildtitel" width="100px" height="100px" />
4. Tippen Sie bei "src" den direkten Pfad zu Ihrer Bilddatei auf Ihrem Webserver ein.
5. Ändern Sie danach die Einträge für "alt" und "title". Das Attribut "alt" bedeutet, dass dieser Wert bzw. dieser Text angezeigt wird, falls das Bild nicht gefunden werden sollte. Das Attribut "title" zeigt dem Benutzer einen Bildtitel an, wenn dieser mit der Maus über das Bild fährt.
6. Passen Sie zum Schluss die Werte für "width" (Breite) und "height" (Höhe) nach Ihren Bedürfnissen an.
7. Sobald Sie alle Einträge geändert haben, speichern Sie Ihre HTML-Datei ab und laden Sie diese auf Ihrem Webserver hoch.

Alle Bilder einheitlich skalieren

Falls Sie viele Bilder auf einer HTML-Seite haben und diese nicht einzeln skalieren möchten, können Sie mit CSS für alle Bilder eine einheitliche Breite und Höhe festlegen. CSS-Codes sind zusätzliche Elemente für HTML-Seiten, mit denen Sie diese einheitlich stylen können.

1. Öffnen Sie dazu erneut Ihre HTML-Datei.
2. Fügen Sie in Ihrem head-Bereich zunächst die beiden folgenden Zeilen ein, um damit einen CSS-Code in Ihrer HTML-Datei nutzen zu können:
   <style>
   </style>
3. Schreiben Sie nun zwischen die beiden Zeilen, also nach "<style>" und vor "</style>":
   img
   {
   width: 100px;
   height: 100px;
   border: 0;
   }
4. Dadurch werden für alle img-Tags die eben definierten Werte übernommen. Das heißt, dass alle eingefügten Bilder eine Breite ("width") und Höhe ("height") von 100px haben, sowie keinen Rahmen ("border") besitzen. Ändern Sie die Werte nach Ihren Wünschen.
5. Falls Sie bereits für ein paar Bilder bestimmte Höhen und Breiten eingegeben haben, sollten Sie diese löschen, wenn Sie alle Bilder einheitlich skalieren möchten. Zwar werden allen Bildern mit dem CSS-Code dieselben Werte zugewiesen, allerdings gehen die Werte im img-Tag der allgemeinen Deklaration vor.
6. Speichern Sie die Datei ab und laden Sie diese erneut auf Ihrem Webserver hoch.