IEでJavaScriptの画像が異なる動作をする

Question

IE 11では、Firefox/Chromeではなく、動的に作成された画像の幅と高さの属性をIEが設定しているように見えるため、画像の縮尺が正しくありません。

$(function() { 
 
    var image = new Image(); 
 
    image.src = "http://placehold.it/350x1200"; 
 
    $("div").append($(image)); 
 
})

div { 
 
    width: 100px; 
 
    max-height: 100px; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
</div>

私はSRCを設定する前に、未定義または/後0に寸法を設定しようとしたが、その後の画像はレンダリングされません。

IEの追加チェックなしでブラウザ間の整合性をどのように達成できますか？画像がキャッシュされているかどうかにかかわらず、すべてのブラウザで機能するように、適切なタイミングでwidth/height属性を削除する方法はありますか？また、私はあらかじめ画像の大きさを知らないかもしれません。

注：：この問題はSOのスニペットでは表示されませんが、jsfiddleとローカルのhtmlファイルで表示されます。

編集：ここではは、画像は、Firefox/Chromeで次のようになります。

これは、IE11である：

Answer 1

IEは、幅と高さは、まあ、私は、フレーズ、それをその方法ではありませんでしょう動的に作成された画像

の属性を設定していますように思えるので。私はむしろ、$(image)を使用して、JS Image要素を追加可能なHTMLコードに「しよう」と言うと、この予期しない結果が出ているようですが、そのコードは私にとっては奇妙に見えます。

あなたは、単純な

$("div").append('<img src="http://placehold.it/350x1200">'); 

IE 11であることを置き換えたら、他のブラウザと同じ画像を表示します。

Answer 2

変更

img { 
    max-width: 100%; 
    max-height: inherit; 
} 

img{width:100%} 

にオーバーフローを追加し、親のdivの高さをオーバーフローやリサイズ子要素を停止するには：隠されました;ディビジョンへのルールそうしないと、画像は自然な値とは異なるアスペクト比でレンダリングされ、奇妙に見えます。