Matthias Scharwies: flexible Bilderwand

Beitrag lesen

Servus!

das Samsung Galaxy Note10+ hat eine Auflösung von 3040x1440, vermutlich sind die 3tausender Bilder auch bald wieder zu winzig, ...

Daher kann ich dir nicht zustimmen, allerdings habe ich bei der Einen oder Anderen Serie die Kompression der Bilder falsch gewählt.

Nein, diese Diskussion führen wir hier im Forum alle 3 Monate.

Ich finde die Bilderwand gut, würde aber keine Bilder austauschen, da bei kleineren Viewports die Animation unter dem Text liegen könnte.

Animation unter Text versteh ich nicht ganz, aber das Ausgtausche find ich auch zu viel des Guten...

Im Beispiel hast Du eine h2 und einen Ghost-Button-Link über den Bildern. Bei bestimmten Viewports ändert sich der Hintergrund unter dem Ghost-Button → wirkt unruhig und unprofessionell.

Ja, das ist eine Liste aus Bildern, die man mit grid (Bsp für Bildergalerie mit auto-fill) flexibel auf dem Bildschirm verteilen würde. Die Vorschaubilder sollten eine gewisse Mindestgröße aber nicht unterschreiten.

schau ich mir genauer an, eine Mindestgröße halte ich auch für sinnvoll, aber welche (?)... thx

ka, nicht 30x20px, aber evtl 6em x 3em?

Hierzu im Wiki: Vergessen Sie den Begriff Pixel!

Imho sollten die Bilder umbrecnen und immer mehr Zeilen erzeugen bis noch 1 Spalte übrig ist und dann sollten die Bilder kleiner werden bis das keinen Sinn macht und der Bildschirm überläuft.

..?

hier hast du mich sicher missverstanden, ich habe nicht vor etwas zu Animieren, habe versucht das verhalten zu beschreiben, wenn der Browser kleiner wird...

Ah! Formuliere doch so:

  • Die Bilder deiner Liste sollen eine bestimmte Größe (3em x 2em) haben.

  • Die Bilder sollen (wie Text) nebeneinander dargestellt werden.

  • Was keinen Platz hat, soll in einer neuen Zeile dargestellt werden.

Das geht mit Grid Layout: CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries

Lies mal dieses Tutorial; ab auto-fill ist bestimmt auch für Dich was Verwendbares dabei!

Sobald Dein Versuch läuft, kannst Du ja mit verschiedenen Bilder-Größen experimentieren. Die oben verlinkte Bilder-Galerie ermöglicht auch verschiedene Formate.

Und auch wenn Du einen 4k-Monitor hast, Thumbnail-Bilder sollten nicht so groß sein!

Herzliche Grüße

Matthias Scharwies

--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim