CSS: Probleme beim Objektform mit und verwandeln gemeinsam auf Webkit

Question

ich sowohl die CSS-Eigenschaft object-fit: cover auf einem img Element zu verwenden, ich versuche mein Bild füllt seine div und transform: scale(xx) enthält, haben das Bild haben auf schweben Auszoomen.

Hier ist ein Beispiel Geige: https://jsfiddle.net/96kbuncq/
Edit: Probe mit realen Bildern: https://jsfiddle.net/96kbuncq/3/

HTML:

<div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" /> 
    </div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" /> 
    </div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
    </div> 
</div> 

CSS:

..... 

div.category img { 
    display: block; 
    height: 100%; 
    width: 100%; 
    object-fit: cover; 
    object-position: center; 
} 

/* Transformations */ 

div.category img { 
    transition: transform 0.35s; 
    transform: /*translateZ(0)*/ scale(1.12); 
} 

div.category:hover img { 
    transform: /*translateZ(0)*/ scale(1); 
} 

Dies funktioniert in Firefox in Ordnung, aber In Chrome und Opera habe ich folgende Probleme:

• Wenn die erste div schweben, werden die beiden anderen ebenfalls betroffen (und, wenn die zweite schwebt, wird der dritte ebenfalls betroffen),
• Wenn ein div schwebt, wird das Bild innerhalb des ersten vollständig angezeigt wird (wir kann das ganze Bild gestreckt sehen, um in das div zu passen, bevor es richtig herausgezoomt wird und das div "bedeckend" wird.

Ich weiß nicht, wie man diese Probleme löst.

über das erste Problem (betroffene Geschwister), habe ich andere Antworten gefunden translateZ(0) verwenden sagen, aber wenn ich das hinzufügen der object-fit: cover nicht mehr funktioniert (das ganze Bild gestreckt wird im Innern der div zu passen).

Irgendwelche Ideen, wie dies in Chrome funktioniert? (Sowohl die object-fit und transform arbeiten als wenn ohne das andere verwendet erwartet.)

Answer 1

Nach der Prüfung scheint es, dass backface-visibility, translateZ und translate3d, die erforderlich sind, um die Transformation Flimmern zu verhindern, brechen object-fit und background-size. Wenn Sie das Bild zentrieren möchten, können Sie wie im folgenden Beispiel position: absolute und translate verwenden.

div.category { 
 
    width: 80%; 
 
    height: 150px; 
 
    margin: 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) scale(1.12); /* order is important here*/ 
 
    backface-visibility: hidden; 
 
    transition: transform 0.35s; 
 
} 
 
div.category:hover img { 
 
    transform: translate(-50%, -50%) scale(1); 
 
}

<div> 
 
    <div class="category"> 
 
     <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> 
 
    </div> 
 
    <div class="category"> 
 
     <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> 
 
    </div> 
 
    <div class="category"> 
 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
 
    </div> 
 
</div>

http://jsfiddle.net/moogs/r1s1rtLk/4/

Answer 2

Sie können eine zusätzliche Schicht, mit Klasse wickeln, erstellen und diese den Zoom-Effekt

Ihre Stile sind die gleichen verwenden, aber neu definiert

html, body { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
div.category { 
 
    width: 80%; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    margin: 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.wrap { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
div.category .wrap img { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit: cover; 
 
    object-position: center; 
 
} 
 

 
/* Transformations */ 
 

 
div.category .wrap { 
 
    transition: transform 0.35s; 
 
    transform: scale(1.12); 
 
} 
 

 
div.category:hover .wrap { 
 
    transform: scale(1); 
 
}

<div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
 
     </div> 
 
    </div> 
 
</div>