Wie streckt TheSixyOne.com das Bild proportional auf eine ganze Seite?

Question

Ich liebe die neue http://thesixtyone.com Entwurf. Ich frage mich, wie sie das Bild proportional strecken, damit es auf den gesamten Hintergrund passt? Verwenden sie CSS/Javascript oder andere Tricks?

Answer 1

Es werden sowohl CSS als auch Javascript verwendet.
Es nimmt den größeren Wert von Höhe oder Breite, setzt die passende Bildabmessung auf diesen Wert, berechnet dann das Verhältnis von ursprünglicher Abmessung zu neuer Abmessung und wendet dieses Verhältnis dann auf die gegenüberliegende Abmessung an.

Zum Beispiel. Angenommen, das Originalfoto war 100x100. Wenn Ihr Bildschirm 200x100 groß ist, wird die erste Dimension gestreckt (200 ist größer als 100), damit es passt. Das ist ein Verhältnis von 2:1, also wird die andere Dimension in gleicher Weise gestreckt. Das resultierende Bild ist tatsächlich 200x200.

Fügen Sie etwas mehr Code hinzu, um das Ganze zentriert zu halten (so dass die außerhalb des Bildschirms liegenden Teile der kleineren Dimension gleich sind), und voila.

In meinem Beispiel würde das Bild um 50 nach oben verschoben, so dass Sie die mittleren 100 (die Bildschirmgröße) des Bildes sehen, das auf 200 gestreckt wurde.

Das Bild ist eigentlich ein DIV-Tag mit der Eigenschaft Hintergrundbild.

Answer 2

Ich bin nicht sicher, welche Bibliothek sie verwenden, aber in ihrem Javascript-Quellcode habe ich nach "resize" gesucht und gefunden:

Event.observe(window,"resize",t61.background.sync_size);

Das sieht so aus, als ob sie einen Ereignishandler an window.onresize anhängen würden.