Wie dehnt TheSixyOne.com das Bild proportional auf die ganze Seite aus?

9

Ich liebe das neue Design Ссылка . Ich frage mich, wie sie das Bild proportional auf den gesamten Hintergrund ausdehnen? Verwenden sie CSS / Javascript oder andere Tricks?

    
Phen 27.01.2010, 03:45
quelle

2 Antworten

4

Sowohl CSS als auch Javascript werden verwendet.
Die Höhe oder Breite wird größer, die entsprechende Bilddimension wird festgelegt, anschließend wird das Verhältnis der ursprünglichen Bemaßung zur neuen Bemaßung berechnet und anschließend das Verhältnis auf die entgegengesetzte Bemaßung angewendet.

Zum Beispiel. Sprich das Originalfoto war 100x100. Wenn Ihr Bildschirm 200x100 ist; dann dehnt es die erste Dimension (200 ist größer als 100) passend aus. Dies ist ein Verhältnis von 2: 1, also macht es die gleiche Bemühung für die andere Dimension. Das resultierende Bild ist eigentlich 200x200.

Fügen Sie einen Touch mehr Code hinzu, um das Ganze zentriert zu halten (so dass die Off-Screen-Teile der Dimension des Leasinggebers gleich sind) und voila.

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

Das Bild ist tatsächlich ein DIV-Tag mit der Hintergrundbildeigenschaft.

    
Chris S 27.01.2010 04:35
quelle
1

Nicht sicher, welche Bibliothek sie verwenden, aber in ihrer Javascript-Quelle habe ich nach "resize" gesucht und gefunden:

%Vor%

Es sieht so aus, als würden sie einen Event-Handler an window.onresize anhängen.

    
slebetman 27.01.2010 04:36
quelle