Nesne sığdırma stilinde geçişte görüntü: kapak;

Question

'Ello Stackoverflow!

Bunu anlamak için bana kimsenin yardım edip edemeyeceğini merak ediyorum. this Görüntüleyici Önceden/Sonra Jason Mayes tarafından görüntülendikten sonra, yanıt vermek için ortadayım.

Bu yüzden "object-fit: cover;" ve "nesne pozisyonu:% 50% 50;" harika çalışmak ama kısa bir süre sonra geçişin kendisinin bir şekilde bu şekilde biçimlendirilmediğini fark ettim.

zaman daha net göstermek için Jason'ın kalemini çatallı: http://codepen.io/RogerAntonio/pen/rVXrma

Sorun buralarda bir yerde yatıyor düşünüyorum:

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

şimdiden teşekkür ederiz!

Answer 1

Bu nesne özelliklerine yönelik destek mükemmel değildir. Satır içi veya arka plandaki satır içi arka plan resimlerini kullanmayı ve sonra bir yükseklik ayarlamayı deneyeceğim.

<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

Nesne-fit geçişlerle kırmaya bilinmektedir.

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

Sen diğer bazı gereksiz beyanlar konumlandırma geçersiz olmaz böylece stilleri göz ardı etmek gerekir: mülk dönüşümü CSS ile örneğin - Ben senin görüntüyü yeniden konumlandırma alternatif bir yol kullanmanızı öneririz. Bu çalışmayı farklı tarayıcılarda yapmak için bazı satıcı önekleri eklemeniz gerekebilir. Slightly modified fiddle here