Responsive Images
Umgang mit Bilder
Egal ob Fotografien, statische Infografiken oder Illustrationen, Bilder können in zwei Möglichkeiten vorhanden sein.
Fixes Seitenverhältnis
Bilder, bei denen die gesamte Bildfläche von Bedeutung ist und nichts weggeschnitten werden darf, sollten mit fixen Seitenverhältnissen arbeiten.
Inhaltliche Bilder sind im HTML gesetzt (img-Tag)
Variable Seitenverhältnis
Bilder, die einen Umraum besitzen und einen klaren Fokuspunkt, können mit variablen Seitenverhältnissen arbeiten. Dies ermöglicht mehr Gestaltungsoptionen sowie Einsatzgebiete für die Bilder.
Hintergrund Bilder sind im CSS gesetzt (background-image CSS-Property).
Mittels der «Object-Fit» CSS Property können reguläre Bilder, gleich wie Hintergrundbilder eingesetzt werden.
