Wie funktionieren die verschiedenen Darstellungsmöglichkeiten (Beschneidung, Skalierung, Ausrichtung) bei einem Bild oder Video?

In den verschiedenen Apps und Suites haben Sie meistens die Möglichkeit bei der Verwendung eines Bildes/Videos die Darstellung zu beeinflussen. Dazu gibt es unterhalb des Bildes/Videos zwei DropDown-Menüs. Sollte das Element noch in anderen Bereichen verwendet werden, wird zusätzlich noch ein weiterer Button für das Aufschalten der "Erweiterte Bildeinstellungen" angezeigt.


Bild 1: Buttons zur Einstellung des Verhaltens von Bild/Video

Das erste DropDown-Menü  beeinflusst die Beschneidung bzw. Skalierung des Elements. Mögliche Einstellungen sind:

 Inhalte nicht beschneiden, komplett zeigen (leere Flächen möglich)
 Zielbereich komplett ausfüllen, Inhalt beschneiden und skalieren
 Original verwenden, nicht beschneiden oder skalieren

Das zweite DropDown-Menü beeinflusst die Positionierung des Elements innerhalb des Zielbereiches. Mögliche Einstellungen sind:

 komplett mittig ausrichten
 links oben ausrichten
 oben ausrichten
 rechts oben ausrichten
 rechts ausrichten
 unten rechts ausrichten
 unten ausrichten
 unten links ausrichten
 links ausrichten

In dem aufschaltbaren Fenster "Erweiterte Bildeinstellungen" können für den jeweiligen Bereich die Einstellungen überschrieben werden. Dies ist notwendig, wenn dort die Proportionen innerhalb des verwendeten Bereichs unterschiedlich sind.


Bild 2: Fenster "Erweiterte Bildeinstellungen"

Im Folgenden werden anhand einiger Beispiele die unterschiedlichen Varianten für ein besseres Verständnis dargestellt.

--------------------

Variante 1
Fullscreen Background horizontal mit passendem Full-HD Bild (horizontal)
Ausgangsbild: 1920x1080 Pixel
Darstellungsbereich: 1920x1080 Pixel 


Bild 3: Full-HD Hintergrundbild auf gleicher Auflösung des Monitors

Kombination: egal

Da das Bild exakt die gleichen Maße wie der Darstellungsbereich (in diesem Fall die Auflösung des Monitors) hat, ist bei jeder Kombination das Ergebnis das Gleiche. Es gehen keine Bildinformationen verloren.

--------------------

Variante 2
Fullscreen Background vertikal mit Full-HD Bild (horizontal)
Ausgangsbild: 1920x1080 Pixel
Darstellungsbereich: 1080x1920 Pixel 

Variante 2 / Beispiel 1


Bild 4: Beispiel 1 - dasselbe Full-HD Hintergrundbild auf vertikaler Full-HD Auflösung des Monitors

 Inhalte nicht beschneiden, komplett zeigen (leere Flächen möglich)
 komplett mittig ausrichten

Da der Monitor eine andere Full-HD Proportion als das Bild hat entstehen große Leerflächen.

 

Variante 2 / Beispiel 2Bild 5: Beispiel 2 - Full-HD Hintergrundbild auf vertikaler Full-HD Auflösung des Monitors, Beschneidung mittig

 Zielbereich komplett ausfüllen, Inhalt beschneiden und skalieren
 komplett mittig ausrichten

Wird die Skalierung so geändert, dass das Bild soweit hoch skaliert wird bis es in der Höhe den gesamten zur Verfügung stehen Bereich ausfüllt, gehen dabei 2/3 der Bildinformationen verloren. Sie liegen außerhalb des sichtbaren Bereichs (in diesem Beispiel links und rechts). 

 

Variante 2 / Beispiel 3


Bild 6: Beispiel 3 - Full-HD Hintergrundbild auf vertikaler Full-HD Auflösung des Monitors, Beschneidung von links

 Zielbereich komplett ausfüllen, Inhalt beschneiden und skalieren
 links ausrichten

Verändert man nun die Ausrichtung auf "links ausrichten" wird sichtbar, dass nun das Bild innerhalb des sichtbaren Bereichs links positioniert wird und die nicht sichtbaren Bereiche komplett im rechten Bereich des Bildes liegen.

--------------------

Variante 3
Bild in Button
Ausgangsbild: 255x444 Pixel (vertikal)
Darstellungsbereich (Buttongröße): 170x170 Pixel


Bild 7: Ausgangsbild 255x444 Pixel soll in einen quadratischen Button 170x170 Pixel verwendet werden

Das zu verwendende Bild hat weder die richtigen Proportionen (in diesem Fall quadratisch) als auch die passenden Größe für den Zielbereich des Button.

 

Variante 3 / Beispiel 1


Bild 8: Beispiel 1 - Bild wird komplett innerhalb des Buttons dargestellt

 Inhalte nicht beschneiden, komplett zeigen (leere Flächen möglich)
 komplett mittig ausrichten

Beispiel 1 zeigt die Darstellung des kompletten Bildes innerhalb des Buttons. Durch die unterschiedliche Proportion entstehen aber leere Flächen, die je nach verwendetem Template der Suite transparente oder beispielsweise graue Flächen sein können.

 

Variante 3 / Beispiel 2


Bild 9: Beispiel 2 - Bild wird skaliert, bis der Buttonbereich in der Breite komplett ausgefüllt wird

 Zielbereich komplett ausfüllen, Inhalt beschneiden und skalieren
 komplett mittig ausrichten

Beispiel 2 zeigt die Darstellung des Bildes, so dass der Button komplett ausgefüllt ist und keine Leerflächen zu sehen sind. Dadurch, dass das Bild in der Höhe größer ist als in der Breite, wird das Bild so lange in die Breite skaliert, bis der Button ausgefüllt ist. Dadurch entstehen oben und unten Bereiche mit Bildinformationen die nicht sichtbar sind, also verloren gehen.


Bild 10: weitere Beispiel 2 - Bild wird skaliert, bis der Buttonbereich in der Breite komplett ausgefüllt wird

 Zielbereich komplett ausfüllen, Inhalt beschneiden und skalieren
 oben ausrichten bzw.  unten ausrichten

Andere Varianten aus Beispiel 2 mit oberer bzw. unterer Ausrichtung.

 

Variante 3 / Beispiel 3


Bild 11: Beispiel 3 - Bild wird in Originalgröße verwendet und auf alle Ausrichtungsmöglichkeiten angewendet

 Original verwenden, nicht beschneiden oder skalieren
 mit allen Ausrichtungsmöglichkeiten

Beispiel 3 zeigt die Darstellung des Bildes in Originalgröße mit allen Ausrichtungsvarianten. Gut zu sehen ist, dass im Gegensatz zu Beispiel 2 noch wesentlich mehr Bildinformationen verloren gehen. Dies beruht darauf, dass das Bild nicht bestmöglich in den Button skaliert wird.

Suchbegriffe: Bildeinstellung, Bildeinstellungen, Videoeinstellung, Videoeinstellungen

Haben Sie Fragen? Anfrage einreichen