2017-01-16 7 views
0

javascriptを使用して画像のサイズを変更しました。以下のコードはchromeとfirefoxではうまくいきますが、Internet Explorer 11(またはそれ以上のバージョン)では動作しません。以下JSを使用してIEで画像のサイズを変更する際にエラーが発生しました

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)+";"; 
     } 

JS関数を呼び出し、HTMLのセグメントである:それはクロムに表示される。ここで

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

は、ウェブスペースの画像です。 https://i.stack.imgur.com/lq60N.png

これは、左側のコンテナの幅に合わせてサイズが変更されることに注意してください。また、コードはコンテナ内で垂直方向に揃えられるようにイメージをトリミングします。

id "image"はimgタグに対応し、 "image-container"はimgタグの周囲のFigure要素に対応します。

また、IEと互換性のあるコードを作成しようとしています。
IEで画像をロードする方法は次のとおりです。https://i.stack.imgur.com/FzwsS.png

答えて

0

jQueryで既存のjavascriptを置き換えてしまいました。

ではなく

document.getElementById('homework').offsetWidth; 

の例については、私は

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

、代わりに私が

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

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

の使用しました

関連する問題