संक्रमण में छवि वस्तु-फिट के लिए स्टाइल नहीं है: कवर;

Question

'एलो स्टैक ओवरफ्लो!

मुझे आश्चर्य है कि कोई मुझे यह समझने में मदद कर सकता है। मुझे this जेसन मेयस द्वारा छवि दर्शक के पहले/बाद में मिला और मैं इसे प्रतिक्रियात्मक रूप से केंद्रित करने के लिए काम कर रहा था।

तो मुझे "ऑब्जेक्ट-फिट: कवर;" मिला और "वस्तु-स्थिति: 50% 50%;" महान काम करने के लिए, लेकिन मुझे जल्द ही एहसास हुआ कि संक्रमण स्वयं को किसी तरह से स्टाइल नहीं किया जा रहा था।

मैं आपको और अधिक स्पष्ट रूप से दिखाने के लिए जेसन के कलम काँटेदार: http://codepen.io/RogerAntonio/pen/rVXrma

मुझे लगता है कि समस्या यहीं कहीं निहित है:

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

अग्रिम धन्यवाद!

Answer 1

उन ऑब्जेक्ट गुणों के लिए समर्थन बहुत अच्छा नहीं है। मैं स्पैन या divs पर इनलाइन पृष्ठभूमि छवियों का उपयोग करने और फिर ऊंचाई निर्धारित करने का प्रयास करेंगे।

<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

वस्तु फिट संक्रमण के साथ तोड़ने के लिए जाना जाता है।

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

आप अपनी शैली को नजरअंदाज करने के लिए इतना है कि कुछ अन्य निरर्थक घोषणाओं स्थिति पर हावी नहीं होगा की आवश्यकता होगी: सीएसएस के साथ, उदा, संपत्ति को बदलने - मैं अपनी छवि का स्थान बदलने का एक वैकल्पिक तरीका उपयोग करने का सुझाव। इस काम को विभिन्न ब्राउज़रों में बनाने के लिए आपको कुछ विक्रेता उपसर्ग जोड़ना पड़ सकता है। Slightly modified fiddle here