TAG 2 · HTML

HTML: Bilder einfügen und zentrieren

Mit dem <img>-Element kannst du Bilder auf deiner Website anzeigen. In diesem Beispiel verwenden wir zusätzlich Inline-CSS, um das Bild zu zentrieren und seine Größe zu begrenzen.

1) Ein Bild einfügen

Ein Bild wird in HTML mit dem <img>-Element eingefügt.

Ein einfaches Beispiel sieht so aus: 

<img src="portrait.jpg" alt="Portrait">

Das Element besitzt normalerweise kein </img>. Es wird also nicht wie ein <p> oder <div> geschlossen.

2) Die wichtigsten Attribute

src Gibt an, wo sich das Bild befindet.
alt Beschreibt das Bild als Alternativtext.
style Ermöglicht direktes CSS am Bild.

3) Wo muss das Bild liegen?

Wenn du beispielsweise src="portrait.jpg" verwendest, muss sich die Datei portrait.jpg im entsprechenden Ordner befinden.

Beispiel für eine einfache Ordnerstruktur: 

meine-website/
│
├── index.html
├── web-bilder.html
├── portrait.jpg
└── style.css

Befindet sich das Bild in einem Unterordner, musst du den Pfad entsprechend angeben. 

<img src="bilder/portrait.jpg" alt="Portrait">

4) Ein Bild zentrieren

Jetzt wollen wir das Bild in der Mitte der Seite anzeigen. Dafür verwenden wir Inline-CSS. 

<img
  src="portrait.jpg"
  alt="Portrait"
  style="
    display:block;
    margin-left:auto;
    margin-right:auto;
  ">

Die drei CSS-Eigenschaften haben folgende Aufgaben:

  • display:block macht das Bild zu einem Block-Element.
  • margin-left:auto sorgt für einen automatischen Abstand links.
  • margin-right:auto sorgt für einen automatischen Abstand rechts.

5) Die Bildgröße begrenzen

Ein Bild kann sehr groß sein. Mit max-width kannst du deshalb eine maximale Breite festlegen. 

<img
  src="portrait.jpg"
  alt="Portrait"
  style="
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:300px;
  ">

In diesem Beispiel wird das Bild höchstens 300 Pixel breit.

6) Das Bild schöner gestalten

Mit CSS kannst du das Bild zusätzlich gestalten. Zum Beispiel können wir die Ecken abrunden. 

<img
  src="portrait.jpg"
  alt="Portrait"
  style="
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:300px;
    border-radius:12px;
  ">
Portrait

7) Komplettes Beispiel

Jetzt kombinieren wir alles: 

<div class="note">

  <img
    src="portrait.jpg"
    alt="Portrait"
    style="
      display:block;
      margin-left:auto;
      margin-right:auto;
      max-width:300px;
      border-radius:12px;
    ">

</div>
Portrait

8) Was bedeutet „Inline-CSS“?

Bei Inline-CSS wird die Gestaltung direkt in das HTML-Element geschrieben. 

<img
  src="portrait.jpg"
  alt="Portrait"
  style="max-width:300px;">

Der Vorteil: Es ist schnell und einfach.

Der Nachteil: Bei größeren Websites wird der Code schnell unübersichtlich. Dann ist eine eigene CSS-Datei meistens die bessere Lösung.

Merke

  • Bilder werden mit <img> eingefügt.
  • src gibt den Speicherort des Bildes an.
  • alt beschreibt das Bild.
  • Mit display:block und margin-left/right:auto kannst du ein Bild einfach zentrieren.
  • Mit max-width kannst du die maximale Bildbreite festlegen.
  • Inline-CSS steht direkt im style-Attribut.

9) Mini-Übung

Erstelle eine eigene kleine Bildkarte. Verwende dafür:

  • ein Bild deiner Wahl
  • einen passenden alt-Text
  • eine maximale Breite von 400 Pixeln
  • eine Zentrierung mit Inline-CSS
  • abgerundete Ecken

Versuche anschließend selbst herauszufinden, wie du einen Abstand oberhalb des Bildes einbauen kannst.

```