Fixing IE11's image rescale bug?

Question

As a little experiment, I am trying to fix the wrongly rescaled images one gets when opening the snopes.com homepage using IE11. (See screenshot)

Just to clarify, I am not the owner of the website.

I can see that the affected images belong to a class named "bg-image", but as a beginner, I have almost no idea where to go from there.

Can anyone suggest a quick'n'dirty fix that I can just try out from IE's devtools console?

That homepage is horrible. The best solution is simply to ditch the whole thing. The `sizes` attribute is the thing doing it there, though. — wizzwizz4, Feb 18 '19 at 21:21
Just found this thread - can someone confirm if it is related? https://stackoverflow.com/questions/42173213/ie-11-image-doesnt-scale-down-correctly-within-flexbox — John Blatz, Feb 18 '19 at 22:14
It might be related; you might be able to fix it via that method. Try it! — wizzwizz4, Feb 19 '19 at 10:25
Use your browser's F12 tools to add the CSS rule. JavaScript'll come when you know what you actually want to do. — wizzwizz4, Feb 19 '19 at 17:37

score 1 · Answer 1 · answered Mar 02 '19 at 00:14

1

there is a polyfill for object-fit: cover with IE support:

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

just import that library into your site and your images gets transformed in IE to background-images automatically

answered Mar 02 '19 at 00:14

Artur Leinweber

256
1
6

Mazdak · Accepted Answer · 2019-03-03T14:59:21.630

1

disable img.bg-image > -o-object-fit: cover and object-fit: cover
disable img > max-width: 100% and height: auto
change .bg-image To

.bg-image { position: absolute; top: 0px; height: 100%; display: inline-block; margin-left: 50%; transform: translateX(-50%); }

I checked and it worked on both chrome and IE.

edited Mar 03 '19 at 14:59

answered Mar 03 '19 at 14:53

Mazdak

650
5
13

Your answer was clear and straight to the point, and I was easily able to verify it. Thanks! – John Blatz Mar 03 '19 at 17:14

score 0 · Answer 3 · answered Feb 27 '19 at 09:45

0

use background-size: cover; not object-fit, because it's not useful in ie11

answered Feb 27 '19 at 09:45

user8930932

125
1
9

On which CSS class specifically? I tried it in the F12 devtools, but with no visible effect. – John Blatz Feb 28 '19 at 18:11

krishna · Answer 4 · 2019-03-01T04:51:53.960

Nomally "object-fit" property not supported by the "IE" browsers,

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

Reference link: https://caniuse.com/#search=object-fit

Solution:
Please refer the following solution link: Object-fit: cover; alternative?

Note:
Use the image as a background.

Sample code from "snopes.com" :

Before :

<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;">

Solution :

Method 1:
Apply background image to a element from the image tag.

<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>

Method 2:
You can assign the background image straightly to the 'set-bg-image' element while parsing.

Eg:

<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>

Hope it will helpful.

On which class specifically? I tried it in the F12 devtools, but with no visible effect. — John Blatz, Feb 28 '19 at 18:11

Fixing IE11's image rescale bug?

4 Answers4