Bilder einsetzen – Responsive Design

Es gibt 2 Arten vom Bilder:

  • Bilder, die Inhaltlich wichtig sind und daher im HTML-Code stehen
  • Bilder, die nur Design sind und im CSS-Code integriert werden.
Beispiele für background-size bei Hintergrundbildern
Beispiele für background-size bei Hintergrundbildern

Für die 2 Arten gibt es daher auch unterschiedliche Vorgehensweise:

Wir wollen festlegen, wie sich ein Bild verhält, je nachdem wie viel Platz vorhanden sein wird.

Bilder, die im HTML-Code integriert sind

Diese Bilder haben ihre Größenangaben im HTML-Code hinterlegt. Das ist auch wichtig und richtig so. Das ist bei fixem Design gut, damit der entsprechende Platz vorgehalten wird, solange die Bilder noch nicht geladen sind und damit die Bilder in der bestmöglichen Qualität angezeigt werden.

<img src="https://www.html-seminar.de/bilder/html-seminar.jpg"
  class="bild"
  width="474"
  height="66"
  alt="html-seminar.de - jetzt HTML lernen" >

Bei Responsive Design klappt das nicht mehr! Hier müssen wir über CSS den Angaben in HTML gegensteuern.

.bild {
    width: 100%;
}

Allerdings reichte die Angabe der Breite nicht aus, da ja die Höhe auch noch durch HTML festgelegt wird und es zur Verzerrung des Bildes bei nur der Angabe der Breite kommen würde. Daher muss die Höhe in CSS auch festgelegt werden. Durch die Angabe height: auto; wird die CSS-Angabe zur Berechnung herangezogen und das Bild wird nicht verzerrt!

.bild {
    width: 100%;
    height: auto;
}

Haben wir nun durch viel Platz den Effekt, dass mehr Breite zur Verfügung steht, als das Bild in seiner Originalgröße Breit ist, wird das Bild weiter gestreckt und die Qualität leidet irgendwann deutlich sichtbar. Daher kann die Breite auf die Originalbreite des Bildes begrenzt werden über max-width: 100%;.

Diese Angabe wird anstelle von width gesetzt!

.bild {
    max-width: 100%;
    height: auto;
}

Bilder für Design und Hintergrund, die im CSS eingebunden sind

Hintergrundbilder sind bereits im CSS eingebunden über:

.kopfbereich {
    background: url(hintergrundbildkopf.jpg) no-repeat;
}

Wer mit dem im Beispiel gezeigten Igelfoto testen möchte, kann diesen herunterladen unter https://www.html-seminar.de/bilder/igel-200-7249.jpg. Der Igel hat eine Größe von 200 x 200 Pixel. Die fixe Hintergrundfläche hat eine Größe von 300 x 220 Pixel und die variable Hintergrundgröße 100% x 220 Pixel.

Hier können wir über die CSS-Angabe background-size das Verhalten beeinflussen.

Diese Anweisung ist mit CSS3 gekommen. Wir können diese ab Chrome 4, IE 9, Firefox 4 Safari 4.1 und Opera 10.5 problemlos nutzen. Für einige vorherige Versionen ist das Herstellerprefix notwendig.

Schauen wir an, was damit möglich ist:

.kopfbereich {
    background: url(hintergrundbildkopf.jpg) no-repeat;
    background-size: auto;
}

background-size: auto;

Das Hintergrundbild soll seine originalen Maße in Breite und Höhe beibehalten.

background-size: auto;
Hintergrundbild in seinen originalen Maßen - background-size: auto;
Hintergrundbild in seinen originalen Maßen - background-size: auto;

background-size: 100% 100%;

Wir können auch Prozente angeben und somit ein komplettes Ausfüllen des vorhandenen Bereichs ermöglichen. Daher bitte abschätzen, ob eine Verzerrung des Bildes akzeptabel ist!

background-size: 100% 100%;
Hintergrundbild nutzt kompletten Bereich - es kann zu Verzerrungen kommen - background-size: 100% 100%;
Hintergrundbild nutzt kompletten Bereich - es kann zu Verzerrungen kommen - background-size: 100% 100%;

background-size: contain;

Das Hintergrundbild wird so groß wie möglich skaliert, damit es komplett sichtbar wird. Allerdings kann dadurch entweder neben oder unter dem Bild keine Abdeckung durch das Bild erfolgen und der Hintergrund sichtbar werden.

background-size: contain;
Hintergrundbild so groß wie möglich skaliert damit komplett sichtbar - es kann unbedeckten Bereichen kommen - background-size: cover;
Hintergrundbild so groß wie möglich skaliert damit komplett sichtbar - es kann unbedeckten Bereichen kommen - background-size: cover;

background-size: cover;

Das Hintergrundbild wird so groß wie möglich skaliert, damit der vorhandene Bereich komplett bedeckt ist. Es kann allerdings vorkommen, dass Teile vom Bild abgeschnitten sind!

background-size:cover;
Hintergrundbild so groß wie möglich skaliert - es kann zu Beschneidungen kommen - background-size: contain;
Hintergrundbild so groß wie möglich skaliert - es kann zu Beschneidungen kommen - background-size: contain;

Und wer selber testen mag (Fensterbreite ändern) kann das unter:
https://www.html-seminar.de/beispielcode/background-size-beispiel.htm

Herstellerprefixe für alte Browserversionen

Die Herstellerprefixe sind durchaus sinnvoll und sollten je nach Wahl der Art entsprechend angepasst werden:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Hintergrundbild für komplettes Browserfenster

In CSS3 ist über background-size eine einfache Möglichkeit entstanden, ein flächendeckendes Hintergrundbild zu erstellen.

Das Bild wird zentriert und fixiert (sprich es bewegt sich beim Scrollen nicht mit). Über background-size: cover; bekommt es die maximale Größe.

html {
   background: url(hintergrundbild.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 
}

Wir haben zwar die Einschränkung, dass es nicht alle jeglichen alten Browserversionen funktioniert (siehe oben) – aber die Einfachheit der Integration überzeugt.

Anbei ein Bild zum Testen:
Hintergrundbild Blattgrün

Zum Speichern rechte Maustaste auf das Bild oder folgendem Link klicken und "Speichern unter" wählen.
Link zum Foto: https://www.html-seminar.de/bilder/blattgruen-landschaft-1300.jpg