Alternatywna opcja dopasowania obiektu: okładka do przeglądarki Internet Explorer

Question

Poszukuję alternatywnej metody dopasowania obiektu: okładka przeglądarki internetowej, ponieważ jej nie obsługuje. Zasadniczo używam obiektu-fit: cover, aby nie rozciągać obrazów wewnątrz elementu div. Szukam w Internecie niektórych rozwiązań, ale znalazłem tylko rozwiązania pozwalające załadować obraz z css zamiast z tagu img, tak jak robię to. Czy ktokolwiek ma jakąkolwiek alternatywną metodę nie rozciągania obrazów wewnątrz div na internet explorer Czy ktoś może mi pomóc?

tutaj jest prosty kod

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 rozwiązałem go z tego

HTML

<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

można naprawdę stworzyć alternatywę dla IE9 + używając modernizr. Więc nadal możesz używać obiektów pasujących tam, gdzie są obsługiwane. W tym przykładzie używam również 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(); 
     } 
    }); 
} 

Oczywiście jeśli użytkownik chce przeglądać strony internetowe za pomocą oprogramowania z 20. wieku, będzie on uzyskać 20-wieczną wersję internecie. To tak, jakby próbować oglądać 70mm sceny z filmu Interstellar (lub innego nowoczesnego filmu 16: 9) w telewizorze 4: 3, nie zobaczysz wszystkich funkcji sceny dokowania.