Alternative Option von Objekt-fit: Abdeckung für Internet-Explorer

Question

Ich suche eine alternative Methode des Object-Fit: Abdeckung für den Internet-Explorer, weil es nicht unterstützt. Grundsätzlich benutze ich das Objekt-fit: Cover, um Bilder nicht innerhalb eines div zu strecken. Ich suche im Internet nach Lösungen, aber alles, was ich gefunden habe, waren Lösungen, um das Bild von css anstatt vom img-Tag zu laden, so wie ich es mache. Hat jemand irgendeine alternative Methode, Bilder in einem div auf Internet Explorer nicht zu dehnenKann jemand mir helfen?

hier ist ein einfacher Code

HTML

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

CSS

.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

Ok ich es mit diesem HTML

gelöst

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

CSS

-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

Sie wirklich eine Alternative für ie9 + mit Modernizr erstellen können. So können Sie immer noch Objekt passen, wo es unterstützt wird. In diesem Beispiel verwende ich auch 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(); 
     } 
    }); 
} 

Offensichtlich, wenn jeder Benutzer will die Bahn mit Software aus dem 20. Jahrhundert sehen wird er eine 20. Jahrhundert Version des Web erhalten. Es ist, als würde man versuchen, die 70-mm-Szenen von Interstellar (oder einem modernen 16: 9-Film) in einem 4: 3-Röhrenfernseher zu sehen, man sieht nicht alle Funktionen der Docking-Szene.