Bildunterschrift vertikal links von Bild stellen

FritzKrieger · 14 Juli 2019

Hallo zusammen,

ich sitze seit einigen Stunden vor einer Herausforderung und brauche eure Hilfe:

Ein Bild mit Bildunterschrift soll, beim Verkleinern der Viewport-Breite, beschnitten werden UND
die innenliegende, horizontal angeordnete Bildunterschrift soll um 90° vertikal gegen den Uhrzeigersinn an dem linken Bildrand positioniert werden.

Codebeispiel: https://codepen.io/anon/pen/bPyvbp

Mit "transform: rotate(-90deg)" bekomme ich die Bildunterschrift zwar um 90° gegen den Uhrzeigersinn gedreht, aber das p-Element erschreckt sich nicht über die ganze Höhe.
Zusätzliche Angaben wie "display: block", "height: 100%" sowie ein zusäzlicher Wrapper und/oder Flexbox bringen nicht das gewünschte Ergebnis.

Wie bekomme ich es hin, dass sich das p-Element über die 100% Höhe erstreckt?

Vielleicht gibt es auch eine elegantere Möglichkeit, dies zu bewerkstelligen.
Konstruktives Feedback nehme ich gerne entgegen.

Danke & Grüße,
Fritz

FritzKrieger · 15 Juli 2019

Hi Sempervivum,

danke für die Lösung. 3 Stunden "verschwendet", wegen einer Zeile Code

.
Effizienz ist was anderes.....

Das "padding-top" habe ich kürzlich aus irgendeinem Tutorial entnommen.
Gibt man die Höhe des DIVs in vh an, liegt es auf der Hand, die gleichen Eigenschaft auf für das p-Element zu anzuwenden und das funzt natürlich problemlos.

https://codepen.io/anon/pen/xoNymW

Danke & Grüße,
Fritz

basti1012 · 15 Juli 2019

Mal nee Frage . Im post 1 sieht das auf den Bold so aus als wenn das Bild immer gleich hoch ist und nur in breite responsiv ist.
In euren Pens sind sie aber in der höhe und breite responsiv .
Wie willst du das den jetzt zum schluss haben .?

Ich will auch mal drehen,

habe aber nur in breite responsiv gemacht und nicht die höhe;