Focus Point / Focal Point: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „In responsive Seiten möchte man erreichen das wichtige Bildteile immer zu sehen sind, egal welches Seitenverhältnis (hochkant, quer, Handy...) das Endgerät…“) |
|||
| Zeile 1: | Zeile 1: | ||
| + | Siehe auch: | ||
| + | [[ProcessWire - 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. | 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. | ||
Aktuelle Version vom 11. Juli 2019, 22:36 Uhr
Siehe auch:
ProcessWire - 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
