Bilder

Zur optimalen Bildausgabe können für die verschiedenen Bildschirmgrössen eigene Bildausschnitte (art direction) sowie Bildgrössen (responsive images) definiert werden. Durch setzen eines Seitenverhältnisses kann eine gleichmässige Bilddarstellung aller Bilder erreicht werden.

Zur Festlegung der Bildausschnitte steht ein komfortabler Editor zur Verfügung. Die Bildgrössen werden in den meisten Fällen automatisch angepasst. Unter gewissen Umständen müssen sie jedoch manuell über die Auswahl von Varianten und Definition einer Skalierung definiert werden.

Skalierung

Die Anpassung der Bildgrösse (Skalierung) erfolgt in den meisten Fällen automatisch. In speziellen Fällen kann eine manuelle Anpassung jedoch nötig sein. Die folgenden zwei Beispiel veranschaulichen dies.

Beispiel 1: Container

Bei den unten aufgeführten Bildern handelt es sich um Inhaltselemente, welche in einem Container-Rasterelement untergebracht sind. Damit die Bilder bei der horizontalen Darstellung nicht zu gross sind, wurde die Skalierung auf 0.3 gesetzt. Dem Container wurden die Klassen d-flex justify-content-around und den Bildern die Klassen shadow p-3 mb-5 bg-white rounded zugewiesen.

Beispiel 2: Text und Bilder

Bei diesem Inhaltselement wurde die Bildskalierung xl auf 0.5 gesetzt (xl: 0.5).

Bei diesem Inhaltselement wurde die Bildskalierung xl auf 1.0 belassen (xl: 1.0).