Höhenangaben - werde ich das jemals verstehen?

[Rolf B]

Hallo alle,

ich wollte für User123 eine kleine Demo machen.

Und ich verzweifle daran.

https://jsfiddle.net/Rolf_b/2r1whf57/1/

Wie bringe ich das Bild dazu, nicht höher zu werden als die figure? Die Höhe der figure soll von der Viewport-Höhe abhängen.

Ich habe gelernt, dass prozentuale Höhen nur greifen, wenn die Höhe des Elternelements festgelegt ist. Wieso ist das bei einem row-template mit fr darin nicht der Fall? Am auto für die Caption liegt es nicht, das kann man auf einen festen Wert legen und die Bildhöhe wird trotzdem nicht limitiert. Es liegt am 1fr für die img Zelle. 20em, und alles ist gut. Aber ich will ja gerade flexibel bleiben.

Auf Grid bin ich nicht festgelegt, ich hatte es vorher erfolglos mit Flexbox versucht. Das div um das img war auch nur ein müder Rettungsversuch (ohne Erfolg).

Wie macht man eine responsive Galerie?!?!?! Die Beispiele im Wiki haben immer feste Höhe.

Rolf