Bootstrap Divs unterschiedlich breit

  • Hallo Zusammen,


    Ich habe folgendes Problem:


    Ich habe 8 Divs, die untereinander sind, wo etwas vorgestellt wird.


    Dort habe ich jetzt in dem Text-Bereich unterschiedlich lange Texte. Direkt nebenan ein Bild.


    PROBLEM: Alle Bilder müssen gleich groß ausgegeben werden.


    Die Seite ist aktuell folgende:


    https://projekt-x-treme.de/index3.php


    Dort sind die Container alle unterschiedlich hoch und unterschiedlich breit.


    Wie bekomme ich das hin, trotz dessen, dass alle Texte inhaltlich unterschiedlich lang sind?


    Grüße

    Ben

  • Was meinst du genau mit

    [...] Alle Bilder müssen gleich groß ausgegeben werden.

    ?

    Das ist ein wenig vage.


    Meinst du in der Breite oder in der Höhe oder beides?
    Soll dann das ganze Bild zu sehen sein, oder nur ein Ausschnitt?

    • Wenn nur ein Ausschnitt zu sehen sein soll, welcher Ausschnitt soll es sein?
    • Wenn das ganze Bild zu sehen sein soll, was soll an den Stellen zu sehen sein, an denen das Bild kleiner als der Rahmen ist?


    Sollen auch alle Container gleich breit oder/und hoch sein?


    Übrigens:
    Schau mal in die Konsole. Ich bin schon bei 186437 Fehlern. Uncaught TypeError: Cannot set property 'textContent' of null at index3.php:425

  • Also in der Datei gibt es gar keine 425 Zeilen...


    Also die Bilder sind erstmal nicht das Problem, die werden im 1:1 Format hochgeladen!


    Viel eher ist es, dass die durch die unterschiedliche Länge der Texte automatisch höher werden und dadurch ja auch breiter.


    Daher brauche ich irgendwas, dass alle Divs dieser Klasse gleich hoch sind und sich dann am größte orientieren.

  • Also in der Datei gibt es gar keine 425 Zeilen...

    Es geht um diese Zeile


    Zu deinem Problem:
    Wenn ich das richtig verstehe, möchtest du, dass alle Bilder die gleiche Höhe haben, ausgehend von dem höchsten Bild.

    Da sich die Höhe der Bilder an denen der Boxen orientiert, müssen dann auch alle Boxen gleich hoch sein.

    Die Höhe einer Box orientiert sich an dem Textinhalt.


    Du müsstest also

    1. den Kompletten Textinhalt rendern.
    2. Die höchste Box herausfiltern.
    3. Diese Höhe auf alle anderen Boxen anwenden.

    Dadurch sollten alle Bilder die gleiche höhe haben.

    Bei sehr großen Boxen, kann es nur sein, dass man nicht mehr viel von den Bildern sieht, da der Ausschnitt zu eng ist.



    Diese Idee höre ich das erste Mal und ich denke nicht, dass man das mit Bootstrap hinbekommt.

    Ohne custom JavaScript, kommst du da wahrscheinlich nicht weit.



    Nachtrag:
    Ich habe gerade experimentiert, und herausgefunden, dass du das auch mit CSS Grid machen kannst:
    (Also, dass jede Box die gleiche Höhe hat)
    https://codepen.io/Mr_Beer/pen/JjRwjxX?editors=1100


    Mit Bootsrap 4 geht das aber wohl nicht, grid ist erst ab Bootstrap 5 eingebaut.

  • Ich sehe da ein generelles Problem: Du hast die Breite des Textcontainers auf 66.66% eingestellt und die des Bildes auf 33.33%. Wenn man das Bild jetzt so einrichtet, dass es im Container bleibt und sich nicht nach rechts ausdehnt, wird es relativ klein und der Textcontainer ist viel höher. Ich habe das mal im HTML-Inspektor demonstriert:

    div-img-width.png


    Macht man das Bild größer, z. B. 50% 50% für die beiden Container, wird es nicht besser, denn dann haben die Texte weniger Platz und nehmen noch mehr Höhe in Anspruch - die Katze beißt sich in den Schwanz. Auch wenn man die Abstände, die Du mit <br> eingestellt hast, verkleinern würde, würde es nicht viel besser.