Bilder responsiv

Grundsätzlich sind bereits die meisten Elemente und Bereiche im CMS (Content Management System) automatisch auf die Darstellung verschiedener Endgeräte optimiert. (Menü / Kopfgrafik / Header / Footer usw…), siehe Responsives Verhalten

Eine besondere Aufmerksamkeit braucht es jedoch z.B. bei den Bildern, die in einem Artikel / Blog-Text direkt eingebettet werden, da hier der Redakteur bewusst eine große Gestaltungsfreiheit haben soll. Wir geben hier ein paar Tips für den Einstieg – der Rest ergibt sich über das Testen und Ausprobieren, wobei die DemoSite hier auch eine gute Möglichkeit für Tests bietet!

Grundsätzlich muss die Größe von Bildern in relativen Maßen, sprich in % angegeben werden, um auch mobil optimal dargestellt werden (Gleiches gilt z.B. auch für Tabellen oder Video-Objekte).

 

1. Nachdem Sie in den Textbereich ein Bild einfügt haben, wählen Sie das Formatierungsmenü des Bildes aus.

 

2. Wählen Sie im Formatierungsmenü die Ausrichtung aus und geben Sie die gewünschte Breite in Prozent ein. Wählen Sie z.B. 100%, wenn das Bild die volle Breite des Contentbereichs abdecken soll.
Entsprechend können Sie mit 80% oder 50% kleine Formate positionieren. Die Höhe wird hierbei automatisch stets auf "auto" eingestellt. Nun berechnet das Programm automatisch die entsprechende Höhe des Bildes ohne die Seitenverhältnisse in Abhängigkeit zu Darstellungssituation zu verändern.