Исправление ошибки масштабирования изображения в IE11?

Question

В качестве небольшого эксперимента я пытаюсь исправить неправильно измененные изображения, которые появляются при открытии домашней страницы snopes.com с помощью IE11.(Смотрите скриншот)

Просто чтобы уточнить, я не являюсь владельцем сайта.

Я вижу, что затронутые изображения принадлежат классу с именем "bg-image", но как новичок я почти не представляю, куда идти.

Может кто-нибудь предложитьquick'n'dirty исправить, что я могу просто попробовать с консоли devtools IE?

Answer 1

• отключить img.bg-image> -o-object-fit: cover и object-fit: cover
• отключить img> max-width: 100% и высоту: auto

• изменить .bg-image на

  .bg-image {position: absolute;верх: 0px;высота: 100%;дисплей: встроенный блок;поле слева: 50%;transform: translateX (-50%);}

Я проверил, и это работало как на Chrome, так и на IE.

Answer 2

Обычно свойство «подгонка объекта» не поддерживается браузерами «IE»,

-o-object-fit: cover;
object-fit: cover;

Ссылка: https://caniuse.com/#search=object-fit

Решение: Пожалуйста, обратитесь к следующей ссылке решения: Object-fit: cover;альтернатива?

Примечание: Используйте изображение в качестве фона.

Пример кода с "snopes.com":

До:

<img class="bg-image lazy-resource" src="https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg?resize=865,452" alt="Did a Black Woman Named Malinda Borden Perish Because Titanic’s Lifeboats Were ‘Whites Only?’" data-lazy-loaded="true" style="display: block;">

Решение:

Метод 1: Примените фоновое изображение к элементу из тега image.

<div class="set-bg-image">
    <img class="bg-image lazy-resource" src="https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg?resize=865,452" alt="Did a Black Woman Named Malinda Borden Perish Because Titanic’s Lifeboats Were ‘Whites Only?’">
</div>

<style type="text/css">
    .bg-image {
        visibility: hidden;
        opacity: 0;
    }
    .set-bg-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.bg-image').each(function(){
            var backgroundImageUrl = jQuery(this).attr("src");
            jQuery(this).closest('.set-bg-image').css('background-image', 'url(' + backgroundImageUrl + ')');
        });
    });
</script>

Метод 2: Вы можете назначить фоновое изображение прямо элементу set-bg-image при синтаксическом анализе.

Например:

<div class="set-bg-image" style="background-image: url('https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg')">
</div>

<style type="text/css">
    .set-bg-image {
        min-height: 150px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

Надеюсь, это поможет.

Answer 3

есть заполнение для подгонки объекта: обложка с поддержкой IE:

https://github.com/bfred-it/object-fit-images

просто импортируйте эту библиотеку на ваш сайт, и ваши изображения преобразуются в IE в фоновые изображенияавтоматически

Answer 4

используйте background-size: cover;, а не object-fit, потому что это не полезно в ie11