Bilder gleichmäßig anordnen

[MrMurphy1]

Hallo

Hat jemand eine Idee?

Ich würde das grundsätzlich etwas anders lösen.

Problem: JavaScript ist bei vielen Besuchern blockiert, aus welchen Gründen auch immer.

Deshalb würde ich zunächst ein Layout erstellen, dass grundsätzlich ohne JS funktioniert. Damit würden die Bilder bei jedem Besucher sinnvoll strukturiert angezeigt werden, egal ob sein Browser JS zulässt oder blockiert. Auch wenn das nicht deinen strengen ästhetischen Regeln entsprechen mag. Da hat jeder Besucher 'eh seine eigenen Vorstellungen.

Mit dem JS würde ich dann nur die Anzahl der Bilder (oder in meinem Fall der figure-Elemente) berechnen und davon abhängig das CSS durch das JS anpassen.

Beispielsweise:

Ich würde grundsätzlich zwei Bilder nebeneinander anzeigen, egal wie viele wirklich vorhanden sind. Das CSS dazu könnte folgendermaßen aussehen (zur besseren Übersicht zeige ich nur den CSS-Teil, der durch JS angepasst werden muss):

flex-basis: calc((100% / 2) - 1rem);

Wenn nur ein Bild / figure-Element vorhanden ist müsste das CSS folgendermaßen lauten:

flex-basis: calc((100% / 1) - 1rem);

Bei drei Bildern / figure-Elementen:

flex-basis: calc((100% / 3) - 1rem);

und bei vier Bildern / figure-Elementen:

flex-basis: calc((100% / 2) - 1rem);

Durch JS muss bei diesem Vorgehen nur die Anzahl der Bilder / figure-Elemente ausgelesen werden und die vorhandene CSS-Regel (oder sogar nur die Zahl in der calc-Berechnung) überschrieben werden.

Noch sinnvoller wäre es solche Gestaltungswünsche mittels PHP zu regeln, da die Browser der Besucher dann immer direkt den fertigen Quelltext erhalten.

Gruss

MrMurphy