Banner: Bildausschnitt für kleine Endgeräte anders wählen
Veröffentlichungsdatum: 29. April 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Banner-Elemente müssen je nach Umsetzung und Inhalten die unterschiedlichen Bildschirmgrößen der Clients berücksichtigen, damit alle Inhalte des Banners (z.B. InfoLayer Texte, etc.) optimal dargestellt werden.
Das Banner-Objekt ermöglicht es, zum Bild den mindestens sichtbaren Bildausschnitt festzulegen. Dieser greift unterhalb der für die Bannervariante festgelegten Viewport-Breite. Im Standard ist dies mit $viewport_m_min eine Breite von 768 Pixel.
Sie können über diese Angabe also bei kleineren Endgeräten einen passenden und aussagekräftigeren Bildausschnitt wählen. Dieser ist auch dann sinvoll, wenn der Info-Layer im Banner mehr Text enthält, welcher über ein anderes Seitenverhältnis des Banner-Bildes (für mehr Höhe) dann auch bei kleinerer Bildschirmbreite ersichtlich ist.
Beispiel: Auszug aus der listBannerSlider.scss zur Banner-Variante 0 (Standard)
/*@wCssFragment{class:listBannerSlider;variant:0;caption:Banner standard;caption-en:Banner default}*/ .listBannerSlider_var0 { $viewportMinBannerDefault: $viewport_m_min !default; /* ... */ -w-viewportMinDefault:$viewportMinBannerDefault; /* ... */ }