Höhenangaben - werde ich das jemals verstehen?

[Rolf B]

Hallo Mr.Murphy,

meine Idee war, eine responsive Slideshow zu haben (oder Galerie). Die ggf. auch nur Teil einer responsiven Seite ist. D.h. die Boxgröße der Galerie sollte sich durch das Seitenlayout festlegen - ein Grid, ein Flexboxmix, was sich der Designer gerade ausgedacht hat.

Innerhalb der Galeriebox sollen die Bilder dann so groß wie möglich angezeigt werden.

Das bedeutet aber, dass ich den Bildelementen max-height/max-width 100% geben muss. Ein grid mit Template "galerie" 1fr "footer" auto / 1fr hat das Problem, dass "1fr" keine definite Höhe ist. Selbst dann nicht, wenn ich dem footer eine feste Höhe gebe. Und dadurch ist die Galeriezelle aus Sicht der 100% so hoch wie das ganze Element.

Ich hatte jetzt einige Male eine Kombination, die funktioniert hat, aber ich weiß nicht, wieso. Denn wenn ich nur ein bisschen ändere, brechen die Bilder wieder aus. Einmal schien das zwischenschalten eines div mit overflow:hidden (erzeugt neuen Block Formatting Context) zu helfen, dann wieder nicht.

Im Moment habe ich mal wieder eine Kombi, die funktioniert. Fullpage-Layout mit Grid ("header" auto "main" 1fr "footer" auto / 1fr). Die main-Area ist die Galerie, und die figures darin sind absolut positioniert mit width/height: 100%. Wenn ich sie statt dessen mit einem Grid übereinanderlege, funktioniert es nicht. Eine figure ist ein Grid mit "caption" auto "image" 1fr / 1fr;. In der image-Area ist ein div, das enthält das img-Element, und das div ist eine Flexbox. Zum Zentrieren.

Ein gemeinsames vertikales Zentrieren der figcaption zusammen mit dem Bild gelingt mir nicht. Weil ich es nicht schaffe, eine Box zu erzeugen, die so hoch ist wie das Bild, aber nicht höher als der Platz unter der figcaption.

Das ist tatsächlich das Layout, das ich haben möchte. Ich habe das Page Layout Grid variiert, und die Slideshow folgt korrekt. Es ist aber reiner Versuch und Irrtum, das Zentrier-DIV nervt mich, und ich kann nicht gänzlich sagen, warum es so sein muss, damit es funktioniert. Mich deucht, dass eine JS-gesteuertes Layout verständlicher wäre.

Rolf