Vorschau vertikal floatend

zur Download Seite »

Diese Variante ist absolut responsiv, Breite und/oder Anzahl der Spalten passen sich automatisch der horizontalen Bildschirmauflösung an. Es ist eine reine CSS Lösung. Voraussetzung ist CSS3, das sollte aber in der Browserwelt mittlerweile ausreichend etabliert sein.

Definierte Anzahl der Spalten

In diesem Beispiel ist die Anzahl der Spalten definiert, die Breite der Spalten ergibt sich automatisch. Das ergibt in sehr schmalen Fenstern sehr kleine Vorschaubilder, also sollte man die Anzahl der Spalten nicht zu hoch wählen. Hier wird dieser Effekt mit der zusätzlichen Angabe einer Spaltenbreite abgefangen, dadurch wird die Anzahl der Spalten auf sehr schmalen Displays reduziert.

Definierte Spaltenbreite

Im folgenden Beispiel ist die Breite der Spalten definiert, die Anzahl der Spalten ergibt sich automatisch. CSS prüft, wie oft die angegebene Spaltenbreite in das umgebende Element passt, und passt dann die Spaltenbreite so an, dass das umgebende Element in der Breite voll ausgefüllt wird.

In dieser Galerie ist die Anzeige der Bildbeschreibungen auch für die Vorschaubilder aktiviert (möglich ab FotoPro 4.4).