# Bildergrössen

Bilder, die in das CMS hochgeladen werden, werden in den folgenden Breitenabmessungen skaliert und gespeichert, sofern sie gross genug sind. Falls ein Bild nicht gross genug ist, wird es in allen Dimensionen skaliert, die die ursprüngliche Breite nicht überschreiten.

  • 100px
  • 500px
  • 1000px
  • 1920px
  • 2560px

Die Bilddimensionen werden je nach dem verwendeten Display angepasst, um die optimale Darstellung auf dem Display zu gewährleisten.

# Inhaltsseite

# Teaser-Block: Flach, Galerie, 3D, Kompakt

Alle Teaser Darstellungs-Typen (Ausser Karussell) stellen ein quadratisches Bild dar. Wir empfehlen Full HD Bilder zu verwenden (1920x1920). Mit diesen Dimensionen werden die Bilder auf allen gängigen Displays richtig angezeigt.

# Teaser-Block: Karussell

Das Karussell stellt Bilder über die gesamte Breite des Displays dar. Aus diesem Grund empfehlen wir die Nutzung von Bildern mit einer Breite von mindestens 2560px.

Des Weiteren empfehlen wir, Bilder im Seitenverhältnis von 16:9 zu verwenden. Alternativ funktionieren auch Seitenverhältnisse wie:

  • 16:10
  • 3:2
  • 4:3

# Bild-Block

Bilder werden in der Breite der Anwendung dargestellt. folgende Einstellungen stehen zur Verfügung:

  • Hintergrundfarbe: Eingestellte Hintergrundfarbe erstreckt sich über die gesamte Breite des Displays.

  • Inhalt des Blocks vollständig mit dem Bild ausfüllen: Wenn die Höhe des Bildes die maximale Blockhöhe überschreitet, wird das Bild auf die maximale Höhe runter skaliert. Durch Aktivieren dieser Einstellung wird das Bild jedoch an die Breite des Blocks angepasst, wodurch der obere und untere Rand abgeschnitten wird, um die maximale Höhe nicht zu überschreiten.

  • Bild über gesamte Breite darstellen: Das Bild wird über die gesamte Breite des Displays dargestellt.

  • Maximalhöhe: Definiert die Maximalhöhe für diesen Bild-Block. Die Höhe muss mit einer Masseinheit angeben werden. Bei keiner Angabe wird die Höhe des Bildes verwendet (https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths. Beispiele: 200px, 50vh, 12cm).

  • Ober- und unterhalb des Bildes einen Abstand anzeigen: Ein Abstand wird ober- und unterhalb des Bildes eingefügt.