Enrico: Bilder gleichmäßig anordnen

Hallo Leute,

ich bin am herumrätseln, wie ich 4 Bilder beliebiger Größe zu gleichen Teilen in einen Container zwängen kann. Bei 1-3 Bildern würde ich sie gerne nebeneinander anordnen - das habe ich hinbekommen -, bei 4 Bildern sähe es wahrscheinlich besser aus, wenn in der "oberen" Hälfte des Containers 2 wären und in der "unteren" Hälfte auch 2 - was ich aber partout nicht hinbekomme. Hier könnt ihr schauen was ich habe.

Rechts ist ein Bereich, dessen Höhe (und Breite) im Vorfeld nicht bekannt sind und sich je nach Interaktion (geringfügig) verändern könnte. Bei jeder Änderung setze ich die Höhe des Bildercontainers auf die des rechten Bereichs (imgBox.style.height = contentBox.offsetHeight + 'px';), damit alles schön gleich hoch ist. Nun kann in dem Bildercontainer 1 Bild sein. Das setze ich dann in die Mitte, da es den Container (wahrscheinlich) nicht ganz ausfüllen wird. Bei 2 oder 3 Bildern rücke ich sie direkt aneinander. Bei 4 Bildern wird der Platz aber zu knapp, als dass ein Zusammenrücken schön aussähe. Also möchte ich, dass die Bilder die Hälfte der Höhe des Bildercontainers annehmen damit ich 2 oben und 2 unten habe. Aber nichts will klappen. Hat jemand eine Idee?

Vielen Dank!
Enrico

  1. 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

    1. Hallo,

      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.

      Aber ohne JS ist es doch gar nicht möglich, dass der Bildercontainer genau so groß wird wie der Inhaltscontainer, oder? Das heißt, ich müsste eine Höhe im Vorfeld festlegen - die dann wahrscheinlich nicht passt, aber dadurch werden die Bilder nicht so groß wie sie wollen, richtig?

      Beispielsweise:

      Ich würde grundsätzlich zwei Bilder nebeneinander anzeigen, egal wie viele wirklich vorhanden sind.

      Versteh ich nicht ganz, wie soll ich "grundsätzlich zwei Bilder" anzeigen, wenn nur 1 da ist?

      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);
      

      Wofür steht das "1rem"? Einfach als Abstand zwischen den Bildern?
      Aber bei 4 Bildern würde das doch dennoch die Containerhöhe sprengen...

      Also ich habe es jetzt ganz ohne Flexbox gelöst. Hier.

      Ich hätte dazu noch zwei CSS-Fragen zu vertical-align: Warum rutscht der Inhaltscontainer nach unten, wenn ich beim Bildercontainer und beim Inhaltscontainer vertical-align: top ausschalte? Und warum bei 4 Bildern zwischen der oberen und der unteren Hälfte ein freier Streifen bleibt und ich deswegen den Bildern vertical-align: middle (oder top) geben muss, damit er verschwindet.

      Enrico

    2. @@MrMurphy1

      Durch JS muss bei diesem Vorgehen nur die Anzahl der Bilder / figure-Elemente ausgelesen werden

      Um herauszufinden, ob 1, 2, 3 oder 4 Bilder da sind, braucht man null JavaScript.

      The mental stuff“ unten im PDF; s.a. Heydon Pickerings ALA-Artikel Quantity Queries for CSS.

      LLAP 🖖

      --
      “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. Hallo,

        Um herauszufinden, ob 1, 2, 3 oder 4 Bilder da sind, braucht man null JavaScript.

        The mental stuff“ unten im PDF; s.a. Heydon Pickerings ALA-Artikel Quantity Queries for CSS.

        Interessant, das kannte ich noch nicht. Danke für die Links!

        Enrico

      2. Hej Gunnar,

        Durch JS muss bei diesem Vorgehen nur die Anzahl der Bilder / figure-Elemente ausgelesen werden

        Um herauszufinden, ob 1, 2, 3 oder 4 Bilder da sind, braucht man null JavaScript.

        The mental stuff“ unten im PDF; s.a. Heydon Pickerings ALA-Artikel Quantity Queries for CSS.

        Oh, lannte ich bisher nur von Lea - wer hats zuerst erfunden?

        Marc

        1. @@marctrix

          Oh, lannte ich bisher nur von Lea - wer hats zuerst erfunden?

          Du lallst. ;-)

          Keine Ahnung. Wenn ich dran denke, frage ich mal, wenn ich den einen oder die andere mal wieder sehe.

          Vielleicht war ich es? ;-)

          LLAP 🖖

          --
          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
          1. Hej Gunnar, @@Gunnar Bittersmann

            Oh, lannte ich bisher nur von Lea - wer hats zuerst erfunden?

            Du lallst. ;-)

            Ja, ich mache so viele Tippfehler - nervt mich sehr. Kann es diesmla nciht mal auf die Autokorrektur schieben...

            Keine Ahnung. Wenn ich dran denke, frage ich mal, wenn ich den einen oder die andere mal wieder sehe.

            Vielleicht war ich es? ;-)

            September 2010? - Kann gut sein! Hin und wieder lese ich auch was über tolle CSS-Möglichkeiten und wundere mich um den Wirbel, weil ich das selber schon eine Weile verwende. Jeder hat mal so seine hellen Momente... ;-)

            Was mir übrigens an dem Buch "CSS secrets" von Lea gefällt ist, dass sie Leuten vermittelt, wie man in CSS denken muss, um ans Ziel zu kommen. Oft hat man ein Problem, bei dem man denkt, dass es mit reinem CSS nicht zu lösen ist. Und dann fängt man an Selektoren zu kombinieren, Hintergründe, Schatten und CSS-generierten Inhalt: et voilá ;-)

            Conical gradients kriege ich aber auch nicht hin ;-)

            Marc