Fluide Bildgrößen für responsive Webdesign

In Layouts die sich der Auflösung des Anzeigegeräts anpassen, ob nun kontinuierlich (fluid) oder schrittweise (responsive), stellen Elemente mit fixen Größen ein Problem dar. Texte zum Beispiel können durch Anpassung der Schriftgröße oder verändern der Zeilenlänge an die Spezifika des jeweiligen Device (Anzeigegeräts) angepasst werden. Bilder und Hintergrundbilder jedoch haben keine Umbrüche die einfach neu arrangiert werden können. Bilder und Hintergrundbilder müssen bei gleichem Seitenverhältnis auf die zur Verfügung stehende Anzeigefläche skalieren, es werden also fluide Bildgrößen benötigt.

Fluide Bildgrößen für eingebettete Bilder per CSS

Für eingebettete Bilder könnte man über Media Queries angepasste Breiten und Höhen für eingebettete Bilder definieren, es gibt aber eine viel elegantere Lösung. Per CSS weist man img-Elemente an immer die maximal verfügbare Größe des Elternelements anzunehmen.

img {
max-width: 100%;
}

Von Text umflossene Bilder

Für von Text umflossene Bilder funktioniert der max-width Ansatz ebenfalls

.umflossen {
float: left; /* oder right */
max-width: 50%; /* oder jeder andere gewünschte Prozentwert */
}

Fluide Hintergrundbilder

Hintergrundbilder wird durch den Wert contain oder cover für die Eigenschaft background-size ein fluides Verhalten zugewiesen. Der Wert contain sorgt dafür, dass das Hintergrundbild bei konstantem Seitenverhältnis immer die Größe annimmt bei der sowohl Höhe als auch Breite im Elternelement Platz finden. Der Wert cover sorgt bei konstantem Seitenverhältnis dafür, dass das Hintergrundbild immer die komplette zur Verfügung stehende Hintergrundfläche ausfüllt. Dies führt unter Umständen dazu, dass Teile des Hintergrundbildes nicht angezeigt werden.

element oder class-selector{
background-image: url(pfad zum Bild);
background-position: center center;
background-size: contain; /* oder cover */
background-repeat: no-repeat;
}

Schön wäre es jetzt auch, wenn wir einen speziellen Bereich des Bildes als „wichtig“ definieren könnten und ihn damit immer „sichtbar“ erhalten. Diesen Wunsch erfüllt uns das CSS-Framework Focal Point von Adam Bradley. Das GitHub Projekt Focal Point erlaubt es uns Bereiche eines Bildes zu definieren, die bei Änderungen des Anzeigeformats unbedingt sichtbar bleiben sollen.

 

A.Schramm

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.