Hallo

Wie erreiche ich, dass das Bild so klein wird, dass es in das div passt, dem die Breite 24% zugeordnet wurde?

Das hast du doch erreicht.

Dein Problem ist das du die Grundlagen von HTML / CSS überspringen willst. Du benutzt display-Angaben ohne dich über deren Auswirkung zu informieren.

Wenn du die 24% mal änderen würdest, zum Beispiel auf 50% oder 10% würdest du feststellen, dass das überhaupt keine Auswirkungen hat. Wenn du Angaben wie "display: table;", "display: table-row;", display: table-cell" benutzt, kannst du anschließend nur noch die dafür zulässigen Angaben verwenden. Unzulässige haben wie in deinem Beispiel keine Auswirkungen, sondern werden wie vorgesehen von den Browsern ignoriert.

Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.

Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.

Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".

Gruss

MrMurphy