Obraz w trakcie przejścia nie jest stylizowany na obiektowy: okładka;

Question

"Ello Stackoverflow!

Zastanawiam się, czy ktoś mógłby mi pomóc w ustaleniu tego. Znalazłem this Przed/po przeglądarce zdjęć Jason'a Mayes'a i ja pracowaliśmy nad tym, aby uzyskać responsywny środek.

Tak więc znalazłem "dopasowanie obiektu: pokrycie" i "pozycja obiektu: 50% 50%;" żeby pracować wspaniale, ale wkrótce zrozumiałem, że sama transformacja nie była w jakiś sposób stylizowana.

I rozwidlone pióra Jasona pokazać wyraźniej: http://codepen.io/RogerAntonio/pen/rVXrma

Myślę, że problem leży gdzieś tutaj:

.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; 
} 

Z góry dziękuję!

Answer 1

Obsługa tych właściwości obiektów nie jest świetna. Spróbowałbym użyć wbudowanych obrazów tła na przęsłach lub działach div, a następnie ustawić wysokość.

<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

obiektowe dopasowanie znane zerwać z przejściami. Proponuję za pomocą alternatywnego sposobu repozycjonowanie swój obraz - na przykład z CSS przekształcić właściwość:

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

Będziesz musiał przeoczyć swoje style tak, że niektóre inne zbędne deklaracje nie zastępują pozycjonowanie. Może być konieczne dodanie prefiksu dostawcy, aby działało to w różnych przeglądarkach. Slightly modified fiddle here