CSS-Größe/Zoom-In-Effekt auf Bild bei Beibehaltung der Abmessungen

Question

Ich würde gerne die CSS3 scale() Übergang für einen Rollover-Effekt verwenden, aber ich möchte die Rollover-Bilddimensionen gleich bleiben. Der Effekt ist also, dass das Bild vergrößert wird, aber auf die vorhandene Breite und Höhe beschränkt bleibt.

img:hover { 
    transform:scale(1.5); 
    -ms-transform:scale(1.5); /* IE 9 */ 
    -moz-transform:scale(1.5); /* Firefox */ 
    -webkit-transform:scale(1.5); /* Safari and Chrome */ 
    -o-transform:scale(1.5); /* Opera */ 
} 

Hier ist eine grundlegende fiddle mit zu beginnen.

Aber wieder möchte ich das Bild die Breite/Höhe beibehalten.

Ich bin nicht verheiratet mit der Verwendung der CSS3-Skala. Vielleicht gibt es einen besseren Weg, das Element zu skalieren.

Answer 1

Sie konnten das einfach erreichen, indem er das Bild Einwickeln von einem <div> und das Hinzufügen von overflow: hidden zu diesem Element:

<div class="img-wrapper"> 
    <img src="..." /> 
</div> 

.img-wrapper { 
    display: inline-block; /* change the default display type to inline-block */ 
    overflow: hidden;  /* hide the overflow */ 
} 

WORKING DEMO.

---

Auch ist es erwähnenswert, dass <img> Element (wie auch die anderen Inline-Elemente) baseline standardmäßig auf seinem sitzt. Und there would be ein 4~5px gap at the bottom of the image.

Diese vertikale Lücke gehört zum reservierten Raum von Unterlängen wie: g j p q y. Sie können das Ausrichtungsproblem beheben, indem Sie dem Bild die Eigenschaft vertical-align mit einem anderen Wert als baseline hinzufügen.

Zusätzlich für eine bessere Benutzererfahrung können Sie den Bildern transition hinzufügen.

.img-wrapper img { 
    transition: all .2s ease; 
    vertical-align: middle; 
} 

UPDATED DEMO:

So werden wir mit dem folgenden enden.