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.

© Webdesign Essentials

Video Erklärung

Beim Team-Bild sollten alle Menschen immer ersichtlich sein, bei der Landschafts ist dies nicht zwingend notwendig. Der kurze Clip zeigt dieser grundlegende aber essentielle Unterschied.

Vertiefe dich ins ganze Kapitel

Variabler Inhalt