Ansatz:
Der User wählt pro Seite über erweiterte Eigenschaften ein beliebiges Bild in einem beliebigen Format (Seitenverhältnis).
Formatierung
Bei einem hochauflösenden Bild von z.B. 1800 * 1440 pixel wird je nach Bildschirmgröße ein unterschiedlicher Bereich des Bildes ausgeschnitten. Denn der Eyecatcher soll statisch eine gewisse Höhe (hier 335 Pixel) behalten.
Je nach Bildschirm wird dann ein schmälerer
Bereich oder ein höherer Bereich herangezogen.
Die Bildbreite ist auf die Fensterbreite (Bildschirmbreite) angepasst, die Höhe verzerrungsfrei nahgezogen:
Das Ganze funktioniert auch bei Zoom des Browsers:
Bei Zoom erhöht sich die Pixelanzahl des Eyecatchers und das Bild kann die Fläche nicht komplett ausfüllen. In diesem Moment wird verzerrungsfrei das Bild soweit vergrößert und ein horizontaler Ausschnitt gewählt, bis der Eyecatcher-Bereich nachgezogen wird.
Das ist im Prinzip schon die Seyffenbrand Standard-Funktion.
- Das Bild wird bei Bereitstellung auf den Server nicht verkleinert, sondern in Orginal-Auflösung bereitgestellt. D.h. der Eyecatcher bleibt gestochen scharf.
- Bei der Skalierung wurde ein Rechenfehler korrigiert, es wird in allen Situationen der Eyecatcher unverzerrt angezeigt.
- Einige Browser, IE fast nie, FF selten, Opera und Safari manchmal und Chrome nachvollziebar immer wieder, haben das Problem bei hochauflösenden Bildern, dass sie die Breite und Höhe des Orginal-Bildes nicht schnell genug mit Javascript abgreifen können. Dadurch ging die Berechnung der Anpassungen natürlich völlig daneben. Ungeeignete Ausschnitte und Verzerrungen waren die Folge. Die Routine zum Abgreifen der Bildgröße wurde modifiziert und ist auf allen Browsern ab IE 6.0, alle anderen genannten Browser in der aktuellen Version kompatibel.
