Kleine und große Bilder bei responsive Webdesign

Bei der Erstellung bzw. Umstellung einer Website, die responsive sein soll, muss das Verhalten der Bilder festgelegt werden. Solange ein Bild kleiner als der sichtbare Bereich bzw. das Display ist, werden diese in der Regel auch normal angezeigt. Ist das Bild jedoch größer, so kann es passieren, dass das Bild abgeschnitten angezeigt wird oder dass im Browserfenster Scrollleisten eingeblendet werden. Das genaue Verhalten hängt von verschiedenen Umständen ab.

Große Bilder bei kleinen Displays

Bilder automatisch skalieren

Eine Lösung bei solchem Verhalten kann sein, die Bilder automatisch skalieren zu lassen. Eine einfache Variante hierfür ist, die maximale Breite in den CSS-Einstellungen auf max-width: 100%; und die Höhe auf height: auto; zu setzen. Man könnte auch die maximale Höhe auf max-height: 100%; und die Breite auf width: auto; setzen. Ein Beispielcode für beide Varianten.

/* Wenn die Höhe automatisch skaliert werden soll */
img {  
max-width: 100%;
height: auto;
}

/* Wenn die Breite automatisch skaliert werden soll */
img {  
max-height: 100%;
width: auto;
}

Einige Erfahrungen beim automatischen Skalieren von Bildern

Meistens verwendet man die erste Variante (max-width: 100%; und heigh: auto;). Diese Einstellungen sorgen dafür, dass das Bild eine maximale Breite von 100% erhält und die Höhe automatisch skaliert wird. In einem Fall führten diese Einstellungen in Firefox und im Internet Explorer jedoch nicht zum gewünschten Effekt. Die Bilder wurden nämlich einfach links und rechts abgeschnitten dargestellt. Das war zumindest in den Versionen Firefox 38.0.1 und Internet Explorer 11 der Fall. Erst wenn man zusätzlich die Einstellung width: 100%; hinzufügte, wurden die Bilder auch in Firefox und IE skaliert. Der CSS-Code wurde wie folgt erweitert.

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

Mit der Einstellung width: 100%; wurden große Bilder bei kleinen Bildschirmen auch in Firefox und Internet Explorer verkleinert. Allerdings sorgte diese Einstellung wiederum dafür, dass kleine Bilder auf 100% vergrößert wurden.

Kleine Bilder auf Smartphones

Das Verhalten trat bei Bildern auf, die in einem Container untergebracht wurden, der mit float: none; keine umfließenden Elemente haben sollte. So wurde den Containern, in denen die Bilder untergebracht sind, wieder die Einstellung float: left; zugewiesen. Außerdem wurde mit margin-left: 0; festgelegt, dass der linke Abstand 0 ist. Ein Beispielcode.

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

div.bildcontainer { 
margin-left: 0; 
float: left;
}

Mit diesen Einstellungen wurden große Bilder auf kleinen Displays verkleinert, kleine Bilder wurden nicht vergrößert. Allerdings sorgten diese Einstellungen wiederum dafür, dass man nicht festlegen kann, dass die Bilder keine umfließenden Texte haben. Umfließende Texte zu verhindern, kann bei mehrspaltigen Inhalten sinnvoll sein, wenn z.B. die Displaygröße sehr klein ist und man möchte, dass in solchen Fällen Bild und Text untereinander positioniert werden.

Das konnte dadurch gelöst werden, indem man die Einstellung bei den Containern, in denen die Texte untergebracht sind, auf clear: both; und den linken Abstand auf margin-left: 0; setzte. Ein Beispielcode.

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

div.bildcontainer { 
margin-left: 0; 
float: left;
}

div.textcontainer { 
margin-left: 0; 
clear: both;
}

Die gezeigten Codezeilen könnten bei einer anderen Konstellation nicht zum gewünschten Ergebnis führen. Auf jeden Fall sollte das Zusammenspiel mit kleinen und großen Bildern, mit und ohne umfließenden Texten getestet werden.

Umsetzung in Typo3

In einem Beispiel mussten in Typo3 die CSS-Einstellungen wie folgt gesetzt werden, damit man zum gewünschten Ergebnis kommt.

@media only screen and (max-width:550px) {

div.csc-textpic-intext-right .csc-textpic-imagewrap { 
margin-left: 0; 
float: left; 
}

div.csc-textpic-intext-left .csc-textpic-imagewrap { 
margin-left: 0; 
float: left; 
}

.csc-textpic-intext-right-nowrap .csc-textpic-text { 
margin-left: 0;  
float: left;
}
.csc-textpic-intext-left-nowrap .csc-textpic-text { 
margin-left: 0; 
float: left;
}

div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { 
margin-left: 0; 
float: left; 
}

div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { 
margin-left: 0; 
float: left; 
}

.csc-textpic-text { 
margin-left: 0; 
clear: both; 
}
}

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

In diesem Beispiel bewirkte der CSS-Code, dass bis zu einer Breite von 550px die Bilder und Texte untereinander platziert und dass große Bilder bei kleinen Displays verkleinert und kleine Bilder bei großen Displays nicht vergrößert werden.

Welche CSS-Einstellungen man auch verwendet, auf jeden Fall sollte man den Effekt auf möglichst allen relevanten Browsern und Geräten ausführlich testen und bei Bedarf anpassen sollte, bis das Ergebnis akzeptabel ist.