Focus Point / Focal Point

In responsive Seiten möchte man erreichen das wichtige Bildteile immer zu sehen sind, egal welches Seitenverhältnis (hochkant, quer, Handy...) das Endgerät hat. Hierbei hilft der Focal Point.

Es gibt im Prinzip zwei Möglichkeiten.

• Background Image mit Cover und Prozentangaben. der Browser übernimmt hier die Ausrichtung.
• Image mit Stilen zum Ausrichten. Über JavaScript kann man die Stile passend zum Format des umschließenden Containers anpassen.

Background Image benötigt kein JavaScript mehr wenn der Wert gesetzt ist. Ist allerdings manchmal schwer einzustellen. Die JavaScript Lösung benötigt JavaScript und wird bei jeder Größenänderung ausgeführt.

Links:

• Etwas Theorie zum Ausrichten eines Background Images: https://css-tricks.com/focusing-background-image-precise-location-percentages/
• jQuery Plugin zum automatischen ausrichten von Bildern. es gibt aber auch einen Helper bei den Examples, der die Background-Werte ermitteln kann. http://jonom.github.io/jquery-focuspoint/demos/helper/index.html