Ein flexibles Grid und optimierte Schriften reicht leider nicht aus um ein gutes Responsive Webdesign zu gestalten. Wenn ein Bild eine fixe Größe hat und die Größe des Bildes nicht in Layout passt, verschieben sich Spalten und Texte ungewollt. Daher sind flexible Bilder sehr wichtig für ein Responsive Webdesign. Bei Bildern im Zusammenhang mit Responsive Webdesign tauchen einige Probleme auf, da Bilder starre Objekte sind und nicht mitspielen, wenn ein Grid bzw. Raster verkleinert wird.

Browser stellen Bilder standardmäßig in der vollen Größe dar. Die Browser lesen die Bildeigenschaften selbst aus, sodass keine Größenangaben in HTML oder CSS benötigt werden. Seit einigen Jahren kann man aber die Bildgröße mit CSS manipulieren.

Mit der CSS-Eigenschaft max-width passt sich das Bild dem Container an und wird proportional verkleinert, wenn die Breite der Seitenleiste verkleinert wird.

img { max-width: 100%; }

Meistens haben aber Bilder noch weitere Angaben zu der Breite und Höhe im HTML:

<img src="image.jpg" alt="Schönes Bild" width="150" height="250">

Mit der CSS-Eigenschaft max-width haben wir es also somit nur geschafft, dass sich die Breite anpasst. Aber die Höhe aus dem HTML bleibt erhalten und das Bild wird verzerrt.

In einem solchen Fall müssen die CSS-Angaben mit einem Wert für die Höhe ergänzt werden:

img {
max-width: 100%;
height: auto;
}

Die Anpassungen für die Bilder mit den CSS-Eigenschaften funktionieren in allen modernen gängigen Browsern.

 

Flexible Bilder im Kontext

Wenn Sie ein Bild im Kontext einer Hauptspalte verwenden möchten, hilft die CSS-Eigenschaft max-width:100% nicht weiter, da das Bild nur dann reagiert, wenn auch die Hauptspalte kleiner als die Bildbreite ist.

Bild im Kontext

Die Breite des Bilds muss im Bezug zu der Breite der Hauptspalte stehen. Das kann man mit der folgenden Formel ausrechnen:

Bildbreite / Hauptspalte * 100 = Prozentwert

 

Dabei ist die Bildbreite unsere Zielgröße. Wenn wir z. B. ein Bild in der Standardgröße 150px habe möchten und die Hauptspalte eine Breite von 600px hat, dann rechnen wir:

150 / 600 * 100 = 25%

Die ausgerechnete maximale Bildbreite kann dann in die CSS-Datei geschrieben werden. Falls Sie noch die Position des Bildes auf der linken Seite haben wollen, können Sie die CSS-Eigenschaft float:left eintragen:

.image {
float:left;
max-width: 25%;
}

Mit der gleichen Formel können Sie auch noch den Außenabstand margin ausrechnen. Somit erhalten Sie z. B.:

.image {
float: left;
margin: 0 5% 2.5% 0;
max-width: 25%;
}

Nun verkleinert sich das Bild relativ zur Hauptspalte in einem Responsive Webdesign.

 

Haben Sie Fragen oder Probleme bei flexiblen Bildern für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.