Problem haben, in einer Fotogalerie Bilder zu skalieren -webkit-Transformation Implementierung

Question

ich eine konzeptionelle Frage zu Fotogalerien haben wie folgt aus: in einem Browser

http://www.nikesh.me/demo/image-hover.html

Wenn Sie diese öffnen, die CSS Transitions unterstützt (zum Beispiel Chrome), wird das überhitzte Bild problemlos skaliert, während die gezoomte Version von hoher Qualität bleibt.

Dies wird dadurch erreicht, dass die nicht gezoomten Bilder in einer etwas kleineren Version angezeigt werden, als sie tatsächlich sind, im Wesentlichen zeigt der Zoom sie in ihren wahren Dimensionen.

So werden normale Bilder zuerst verkleinert:

-webkit-transform:scale(0.8); 

Und dann auf Hover skaliert:

-webkit-transform:scale(1.2); 

Meine Frage: Wie wird die anfängliche Skalierung soll nach unten für Browser arbeiten, tun unterstützt diese Methode der Verkleinerung nicht? Versuchen Sie, diese Galerie in IE zu öffnen, um zu sehen, was ich meine, es zeigt die Bilder nicht verkleinert, was sie zu groß macht und dadurch das Layout bricht.

Was ich will:

• Den vollen Effekt in Browsern, die sie unterstützen. Wichtig ist, dass die gezoomte Version Qualität bleibt.
• Keine Auswirkung auf alle für Browser, die diese Funktion nicht unterstützen, noch eine solide ursprünglichen Dimension, so dass kein Layout gebrochen
• Es ist für beide Bild Orientierungen funktionieren sollte, und es können auch Vielfalt in Bild Breiten und Höhen sein

Jeder? Vorzugsweise eine elegante Lösung, die kein Browser-Sniffing oder Javascript benötigt, aber alle Antworten sind willkommen.

Answer 1

Wenn Sie wollen, dass es ohne die Verwendung von Javascript funktioniert, dann scheint es, die einzige Methode, die Sie haben, ist, auf die ursprüngliche Skala mit CSS zu verzichten. Sie werden dies in der "antiquierten" Weise tun, um die Breite und Höhe des Bildes im Markup anzupassen.

<img src="yourImageSrc" width="80%" height="80%"> 

Dies würde erlauben Sie noch Ihr Layout in Takt zu halten, wenn der User-Agent nicht auf dem neuesten Stand ist.

** Ich weiß nicht, ob der Prozentsatz in der literalen Höhe/Breite-Definition funktioniert. Aber Sie können immer das Verhältnis herausfinden, das Sie brauchen, und schließen Sie es an.