Эквивалент стиля CSS "object-fit: cover" для IE

#html #css #media-queries #object-fit

#HTML #css #медиа-запросы #object-fit

Вопрос:

У меня есть баннер во всю ширину, и я использую этот стиль :

 .headline--hero {
  width: 100%;
  min-width: 100%;
  padding: 0;
  height: 490px;
}

@media (max-width: 1024px) {
  .headline--hero {
    height: 46vw;
  }
}

.headline--hero>h2 {
  width: 100%;
  height: 100%;
}

.headline--hero>h2>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Развернуть фрагмент

Это отлично работает с Chrome. Когда я уменьшаю масштаб, используя CTRL - баннер во всю ширину, отрегулируйте нормально.
Однако в IE он сломан, похоже, что стиль object-fit: cover; не работает. Я попытался использовать

 .headline--hero>h2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.headline--hero>h2>img {
  height: auto;
  width: 100%;
}

Развернуть фрагмент

Ширина баннера работает нормально, он получает все 100%, но проблема в высоте, я предполагаю, что, поскольку существует абсолютная позиция, изображение не перемещается по высоте, поэтому изображение не получает полную высоту.

Есть ли способ повторить стиль object-fit: cover; в IE, кроме того, который я пробовал?

Ответ №1:

К сожалению object-fit , не поддерживается в IE

Вот статья, которую я нашел — https://css-tricks.com/almanac/properties/o/object-fit /

Вы можете попробовать background-size: cover; как парень в комментариях, упомянутых ранее