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.
Tags und Links javascript html css image image-manipulation