ऑब्जेक्ट-फिट का वैकल्पिक विकल्प: इंटरनेट एक्सप्लोरर

Question

के लिए कवर मैं ऑब्जेक्ट-फिट का एक वैकल्पिक तरीका देख रहा हूं: इंटरनेट एक्सप्लोरर के लिए कवर, क्योंकि इसका समर्थन नहीं कर रहा है। असल में मैं वस्तु-फिट का उपयोग कर रहा हूं: एक div के अंदर छवियों को खींचने के लिए कवर। मैं कुछ समाधानों के लिए इंटरनेट पर देखता हूं लेकिन जो कुछ मैंने पाया वह इमेज टैग से सीएसएस से छवि लोड करने के लिए समाधान था जैसे कि मैं इसे कर रहा हूं। क्या किसी के पास इंटरनेट एक्सप्लोरर पर एक div के अंदर छवियों को खींचने का कोई वैकल्पिक तरीका नहीं है क्या कोई मेरी मदद कर सकता है?

यहाँ एक सरल कोड

HTML है

<div class="grid-image"> 
    <img itemprop="image" alt="TEST" src="images/15.jpg"> 
</div> 

सीएसएस

.grid-image { 
    width: 100%; 
    background-color: grey; 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
} 

grid-image img { 
    object-fit: cover; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

Answer 1

ठीक है मैं इसे इस

एचटीएमएल

<div class="grid-image" style="background-image: url(images/15.jpg);"></div> 

के साथ हल

सीएसएस

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 

Answer 2

आप वास्तव में IE9 Modernizr का उपयोग कर + के लिए एक वैकल्पिक बना सकते हैं। तो आप अभी भी ऑब्जेक्ट फिट का उपयोग कर सकते हैं जहां यह समर्थित है। इस उदाहरण में मैं भी jQuery का उपयोग करता हूं।

if (! Modernizr.objectfit) { 
    $('.grid-image').each(function() { 
     var $wrapper = $(this), 
     imgUrl = $wrapper.find('img').prop('src'); 
     if (imgUrl) { 
     $wrapper 
     .css('backgroundImage', 'url(' + imgUrl + ')') 
     .addClass('compat-object-fit') 
     .children('img').hide(); 
     } 
    }); 
} 

जाहिर है किसी भी उपयोगकर्ता 20 वीं सदी से सॉफ्टवेयर के साथ वेब ब्राउज़ करना चाहता है वह वेब के एक 20 वीं सदी के संस्करण मिल जाएगा। यह 4: 3 ट्यूब टीवी में इंटरस्टेलर (या किसी भी आधुनिक 16: 9 फिल्म) से 70 मिमी दृश्यों को देखने की कोशिश करने जैसा है, आपको डॉकिंग दृश्य की सभी सुविधाएं नहीं दिखाई देगी।