Responsive Bilder in den Griff bekommen

Ein paar Bilder links, rechts mit Text daneben - am PC und am Tablet. Am Handy soll das Bild aber die ganze Breite haben und der Text drunter stehen, weil sonst alles zu klein ist.
Wenn du das so machst, wie du es von MS Word gewohnt bist, wirst du frickeln – und scheitern. Word ist eben nicht responsiv, so läuft das nicht.

Zaubern

musst du aber trotzdem nicht, es ist in Wahrheit ganz einfach: Mit Stylesheet-Classes bzw Formatvorlagenklassen.

Zuerst lade das Bild per Medienverwaltung (oder sonstwie) hoch, schon halbwegs auf die richtige Größe gebracht. 1000 Pixel Breite ist meist ein guter Wert.

Dann binde es wie gewohnt per „Bild einfügen“ dort ein, wo es sein soll. Die Felder für Breite und Höhe lasse einfach leer.

OK – ist das Bild da? Vermutlich siehst du es jetzt viel zu groß – das machen wir in einem nächsten Schritt:
Bild selektieren und Bild einfügen Icon klicken (oder Rechtsklick auf das Bild → Bildeigenschaften)
In der Dialog-Box wähle den Tab Erweitert:

 

In das Feld „Formatvorlagenklassen“ (Stylesheet-Class) gibt einen der folgenden Werte ein:
pic2left oder pic2right

Im Feld darunter - Stil - sollte nichts stehen – und wenn da was steht: Lösche es.
Klick auf OK.

Wenn alles geklappt hat, ist das Bild jetzt halb so breit wie der Inhaltsbereich und wird links oder rechts mit etwas Abstand umflossen.
Zu breit? Probiere das selbe mit den Klassen pic3left oder pic3right – dann ist es ein Drittel breit, oder pic4left / pic4right für ein Viertel.
Ein voll breites Bild: picfull

Funktioniert? Glückwunsch! Und ist doch gar nicht so schwer.
 

Funktioniert nicht?

Die Klassen hat der Designer des Templates definiert – oder nicht – oder anders. Leider gibt es keine Richtlinien, da hat jeder seine Vorlieben. Ich habe das bei sehr vielen Templates eben mal so gemacht oder nachgerüstet, und es ist deswegen recht häufig.

Frage deinen Webdesigner oder im Forum

---

Ein kleiner Tipp noch: Bei mehreren umflossenen Bildern kann es dazu kommen, dass sie sich „gegenseitig“ umfließen. Verhindere das nicht, indem du Leerzeilen einfügst, sondern nutze hierzu das Feld Stil:
clear:left;
Das bewirkt, dass das Bild nicht am Vorigen dranklebt, sondern links eine neue Zeile macht. clear:right; oder clear:both; kann ebenso helfen. 

Zurück