Bildergalerie mit CSS und Zoom

[Rolf B]

Hallo Kirsten,

so, ich denke, ich habe jetzt eine Idee für die Höhenberechnung.

Das Problem ist, dass Du nicht so einfach den Wert für --w in die Berechnung für --h übernehmen kannst. Denn custom properties sind keine Variablen. Wenn Du in --w einen aufwändigen calc() Ausdruck speicherst, dann speicherst Du nicht dessen Ergebnis, sondern den calc()-Ausdruck. Und wenn Du dann var(--w) irgendwo einsetzt, wird dieser calc()-Ausdruck eingesetzt.

Konsequenz: Deine 100% Angabe ist auf einmal nicht mehr 100% der Body-Breite, sondern 100% der Body-Höhe. Dummerweise ist die Höhe einer Seite inhaltsabhängig, du hast dadurch einen Zirkelbezug und die Höhe bleibt 0.

Eine bessere Idee könnte 100vw sein statt 100%, das ist 100% Viewportbreite. Davon muss man auf jeden Fall noch den horizontalen Margin des Body abziehen. Blöd wird es, wenn die Seite einen vertikalen Scrollbar bekommt, dessen Breite muss man nämlich auch noch abziehen - und eine Maßeinheit, die sich auf "Viewportbreite minus Scrollbar" bezieht, habe ich nicht gefunden. Es gibt zwar dvw (dynamic view width), aber das gilt wohl nur für Mobilgeräte im Querformat, wo die Android/iOS-Controls ein- und ausgeblendet werden können.

Deshalb habe ich überlegt, dass man die Box, der die Galerie enthält (bei Dir den Body), zum Container macht (container-type: inline-size). DANN kann man die Einheit 100cqw verwenden, um 100% der Containerbreite anzusprechen, und 100cqw bleiben auch dann 100% der Breite, wenn man das in eine Höhenberechnung einsetzt.

Ich habe auch wieder die @media-Abfrage eingebaut, um die Anzahl der Spalten von der Viewportbreite abhängig zu machen, aber ich habe gemerkt, dass ich da bei der Höhenberechnung auf die Nase falle. Leider ist die round()-Funktion in Chromia noch nicht verfügbar, so dass ich nicht sagen kann: Anzahl Bilder durch Anzahl Spalten, aufgerundet. Deswegen habe ich --rows in der Mediaquery explizit gesetzt. Wenn Du das vom Server per PHP generierst, kann man das entsprechend vorbelegen. Sinnvoller wäre vermutlich, hier mit JavaScript und der matchMedia-Funktion zu arbeiten (oder darauf zu warten, dass die Chromia sich endlich bequemen, CSS Values Level 4 umzusetzen).

https://jsfiddle.net/Rolf_b/4e2cgxkm/

Das vom Mitleser festgestellte Zucken kann ich bei meinem Beispiel nicht feststellen, vielleicht liegt's an den Buttons.

Und ideal für kleine Viewports ist's auch nicht, da muss man den Galeriemodus vermutlich komplett deaktivieren.

Und was ich noch nicht kapiert habe, ist, warum dieser Trick mit width:0 und min-width:100% funktioniert, damit das Grid sich automatisch anpasst. Vor allem darf man dann beim Hover die Breite nicht auf 150% der berechneten Bildbreite setzen, sondern nur auf 50%, andernfalls wird das Bild viel zu riesig. Strange.

Rolf