Immagine in transizione non styling to object-fit: cover;

Question

'Ello Stackoverflow!

Mi chiedo se qualcuno potrebbe aiutarmi a capirlo. Ho trovato this Prima/Dopo il visualizzatore di immagini di Jason Mayes e io stavamo lavorando per centrarlo in modo reattivo.

Quindi ho trovato "object-fit: cover;" e "posizione dell'oggetto: 50% 50%;" lavorare alla grande, ma presto mi sono reso conto che la transizione stessa non veniva disegnata in quel modo, in qualche modo.

ho biforcuta penna di Jason visualizzare in modo più chiaro: http://codepen.io/RogerAntonio/pen/rVXrma

Credo che il problema sta qui da qualche parte:

.container img { 
    object-fit: cover; 
    object-position: 50% 50%; 
    overflow: hidden; 
} 

.beforeAfter .before { 
    z-index:2; 
    opacity: 1; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

Grazie in anticipo!

Answer 1

Il supporto per tali proprietà dell'oggetto non è eccezionale. Vorrei provare a utilizzare le immagini di sfondo inline su spans o div e quindi impostare un'altezza.

<span class="image before" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272894/data/view-of-independence-square-in-kiev-data.jpg')" /> 
<span class="image after" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272868/data/site-of-anti-government-protest-in-kiev-data.jpg')" /> 

http://codepen.io/Hexl/pen/waVEKL

Answer 2

Object-fit si caratterizza per rompere con transizioni. Io suggerisco di usare un modo alternativo di riposizionare l'immagine - per esempio con i CSS trasformare proprietà:

.container img { 
    width: 100%; 
    height: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Avrete bisogno di trascurare gli stili in modo che alcune altre dichiarazioni ridondanti non sarebbe ignorare il posizionamento. Potrebbe essere necessario aggiungere alcuni prefissi del fornitore per farlo funzionare in browser diversi. Slightly modified fiddle here