Ошибка использования JS для изменения размера изображений в IE

Я использую javascript для изменения размера изображения при загрузке. Приведенный ниже код отлично работает в chrome и firefox, но не работает в internet explorer 11 (или любой версии).

function imgWidth(){
        var width = document.getElementById('homework').offsetWidth;
        document.getElementById('image').style="width: "+(940-width)+";";
        var height = document.getElementById('image-container').offsetHeight;
        var imgheight = document.getElementById('image').offsetHeight;
        if(imgheight > height){
            document.getElementById('image').style="top: -"+((imgheight - height)/2)+";width: "+(940-width)+";";
        }
        document.getElementById('image-container').style="width: "+(940-width)+";margin-left:"+(width+40)+";";
        }

Ниже приведен сегмент html, который вызывает функцию JS:

<figure id="image-container">
    <img id="image" onload="imgWidth()" src="http://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/pia21376d.jpg" title="This image of a crescent Jupiter and the iconic Great Red Spot was created by a citizen scientist (Roman Tkachenko) using data from Juno's JunoCam instrument." />
</figure>

Вот изображение веб-пространства, как он появляется в chrome.
https://i.stack.imgur.com/lq60N.png




Обратите внимание, он изменяется относительно ширины контейнера слева. Код также обрезает изображение так, чтобы оно было выровнено по вертикали внутри контейнера.




Id » image «соответствует тегу img, В то время как» image-container » соответствует элементу figure вокруг тега img.



Опять же, я пытаюсь сделать свой код совместимым с IE.

Вот как загружается изображение в IE: https://i.stack.imgur.com/FzwsS.png

1 ответ

  1. В итоге я заменил существующий javascript на jQuery, и теперь он работает.

    например вместо

    document.getElementById('homework').offsetWidth;
    

    Я использовал

    $("#homework").outerWidth();
    

    И вместо

    document.getElementById('image').style="width: "+(940-width)+";";
    

    Я использовал

    $("#image").css("width",(940-width));