Kategorien
Design HTML/CSS Responsive Design

Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign

Responsives Webdesign zielt darauf, dass eine Website dank unterschiedlicher Layouts auf verschieden großen Displays ordentlich dargestellt wird. Bilder werden dabei in der Regel auf eine bestimmte Breite herunterskaliert. Gerade bei detailreichen Darstellungen kann es dann schon mal vorkommen, dass ein Bild schlecht erkennbar erscheint. Das CSS-Framework Focal Point sorgt für ein intelligentes Beschneiden von Bildern ab bestimmten Größen, damit nur ein Ausschnitt des Bildes – der aber dafür größer – angezeigt wird.


Beispiel für die Festlegung des Focal Point

Da sich der inhaltliche Mittelpunkt eines Bildes nicht immer in der tatsächlichen Bildmitte befindet, kann es passieren, dass nach dem Beschneiden eines Bildes ein wichtiger Bildbestandteil außerhalb des Bildes liegt. Mit Focal Point wird ein Bereich definiert, der den inhaltlichen Fokus eines Bildes darstellt und beim Beschneiden des Bildes auf jeden Fall erhalten bleiben soll.

Focal Point festlegen

Das Prinzip von Focal Point ist einfach: Jedes Bild wird in Raster von zwölf mal zwölf Einheiten unterteilt. Per CSS definiert man nun eine Einheit des Rasters als inhaltlichen Mittelpunkt, den Focal Point. Ist beispielsweise auf einem Bild eine Person abgebildet, lässt sich der Kopf dieser Person als Focal Point definieren. Selbst wenn sich diese Person am Bildrand befindet, fällt sie der Bildbeschneidung nicht zum Opfer.

Um den Focal Point festzulegen, weist man dem Bild zwei Klassen zu, welche die horizontale und vertikale Position des Focal Point innerhalb des Rasters angeben. Gezählt wird von der Rastermitte. Es gibt daher je sechs Klassen, die nach oben, unten, rechts und links zählen.

<div class="focal-point left-3 up-2">
 <div>
   <img src="bild.jpg" width="400" height="300" alt="" />
 </div>
</div>

Im Beispiel wird der Focal Point drei Rastereinheiten nach links und zwei nach oben festgelegt. Die Angabe der Klasse „focal-point“ ist ebenso obligatorisch, wie der zusätzliche DIV-Container um das Bild.

Standardmäßig beschneidet das Framework ein Bild, sobald das Browserfenster kleiner als 767 Pixel ist. Dieser Wert kann in der übersichtlichen Stylesheet-Datei aber leicht angepasst werden.

Funktionsweise von Focal Point

Die Funktionsweise ist leicht erklärt: Über die unterschiedlichen CSS-Klassen wird das Bild über negative margin-Werte beschnitten. Als Einheit wird em verwendet. Die besten Ergebnisse werden erzielt, wenn das Bild ein Seitenverhältnis von 4:3 im Querformat hat. Für hochformatige Bilder im Verhältnis 3:4 sollte die zusätzliche Klasse portrait vergeben werden.

Fazit: Focal Point verfolgt einen interessanten Ansatz für eine bessere Darstellung von Bildern bei kleinen Auflösungen. Das Framework besteht zudem nur aus einer einzelnen, dabei sehr übersichtlichen CSS-Datei und ist daher schnell angewendet.

(dpe)