Schrift in Bild drehen

[AgnusMacGyver]

Hallo zusammen,

ich habe beim respsonsivem Design drei Probleme:

Ich habe 3 Bilder (im Querformat) mit jeweils einer Bildunterschrift. Bei kleinen Viewports sind alle Bilder und die dazugehörigen Überschriften untereinander angeordnet.

Problem 1:
Beim mittleren Viewport möchte ich die Bilder, die mittels Picture-Element, eingebettet sind, gegen andere Bilder im Hochkantformat tauschen. Gleichzeitig - und das ist das eigentliche Problem - soll die Bildüberschrift um 90° gegen den Uhrzeigersinn gedreht werden und sich über die ganze Höhe erstreckt (Skizze anbei).

Problem 2:
Wie bekomme ich die Bildüberschrift, die sich aktuell außerhalb des Bildes befindet, ins Bild? (siehe Skizze)
Das Picture-Element erlaubt außer Source und IMG keine Kindelemente. Eine Positionierung mit "relative/absolute" ist somit nicht möglich.

Problem 3:
Kann mir jmd sagen, woher der Abstand zwischen Bild und Bildunterschrift in der Mobile- und Desktopansicht herkommt? (siehe Screenshot "Problem 3")


Den HTML-Code muss ich als TXT-Datei anhängen, da CodePen & Co. nicht mit dem Picture-Element umgehen können.
Datei einfach in html-code.html umbenennen.

Die Lösung sollte sematisch korrekt sein und den HTML-Validator ohne Fehler bestehen.

Danke & viele Grüße,
Fritz

 

[basti1012]

Zu2 . Warum nimmst du nicht das <figure> und figcaption Element?
Ich glaube, dass es damit einfacher wäre. Damit sollte das Problem aus Frage 1 auch zu beheben sein.
Wenn man dann etwas Zeit hat und es vernünftig macht, sollte das wohl klappen.

Schrift in Bild drehen

Schrift in Bild drehen Hallo zusammen, ich habe beim respsonsivem Design drei Probleme: Ich habe 3 Bilder (im Querformat) mit jeweils einer Bildunterschrift. Bei kleinen Viewports sind alle Bilder und die dazugehörigen Überschriften untereinander angeordnet. Problem 1: Beim mittleren Viewport...

basti1012.bplaced.net

Wie gesagt, das ist jetzt 0815 und gewinnt kein Schönheit-Preis.