Gunther: Sich der Seite anpassende Vorschaubilder

Beitrag lesen

Om nah hoo pez nyeetz, Matthias!

?? Die Bilder sind doch durchaus Inhalt (also <img>), nicht schmückendes Beiwerk (Hintergrundbilder).

Mit img { width: 100% } gibt man ihren die Breite ihres Containers.

Was aber je nach Seitenverhältnis zu Rändern führt.

Wenn die Höhe auf 'auto' gesetzt ist, wohl kaum. ;-)

Bei der angegebenen Beispielseite handelt es sich ja um eine Portfolio-/ Referenzseite mit entsprechenden Projekten.

Bei dem "Mosaik" haben die einzelnen Grafiken/ Bilder alle ein entsprechendes Größenverhältnis - ohne eine solche Verhältnismäßigkeit dürfte man auch kaum eine Chance haben, das Mosaik ohne "Lücken" zu erstellen.

Auf der verlinkten Beispielseite wird die Anordnung durch eine exzessive "absolute Positionierungsorgie" per Javascript (ohne ist die Seite bei schmaleren Viewports übrigens "unbenutzbar") erreicht.

Flexbox scheint mir hier nicht das geeignete Mittel der Wahl zu sein.

Spontan würde ich eher so vorgehen:
Ich würde Container-Elemente mit der Größe des größten Einzelbildformats definieren und diese per 'display: table[-row|cell]' anordnen.
In diesen Container-Elementen kann man dann entweder 1 einzelnes (großes) Bild, oder entsprechend mehrere kleine Bilder anordnen (für die keine weitere Formatierung erforderlich ist).

Et voilà ...!

Die Container-Elemente per relativer Größe formatiert und ggf. deren Anzahl pro Zeile per Media Queries gesteuert, und fertig ist das "skalierende Mosaik".

Gruß Gunther