Альтернативный вариант подгонки объекта: чехол для интернет-проводника

Question

Я ищу альтернативный метод подбора объекта: чехол для интернет-обозревателя, потому что не поддерживает его. По сути, я использую объект-подбор: обложка, чтобы не растягивать изображения внутри div. Я ищу в Интернете некоторые решения, но все, что я нашел, это решения загрузить изображение из css вместо тега img так, как я это делаю. У кого-нибудь есть какой-нибудь альтернативный метод не растягивать изображения внутри div в Internet Explorer. Может кто-нибудь мне помочь?

вот простой код

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

Хорошо, я решил это с этим

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

Вы можете действительно создать альтернативу для 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-го века. Это все равно что пытаться смотреть 70-миллиметровые сцены из Interstellar (или любого современного фильма 16:9) в 4:3 ламповом телевизоре, вы не увидите все особенности сцены док-станции.

Answer 3

Мой подход будет идеально работать во всех браузерах, поскольку это простой трюк с CSS. Пожалуйста, проверьте изображения ниже, чтобы увидеть эффект.

Подход, который я использовал, заключался в том, чтобы поместить изображение внутри контейнера с помощью absolute, а затем разместить его прямо в центре, используя комбинацию:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только он окажется в центре, я даю изображению

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение приобретать эффект Object-fit:cover.

---

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика должна работать во всех браузерах.

---