Internet Explorer会自动将高度和宽度属性添加到新添加的图像中

Question

我将新创建的图像加载到DOM后附加：

var i = $('<img/>');
i[0].src = 'http://placehold.it/700x300';
i.attr('alt', '');
i.on('load', function() {
    $('body').append(i);            
});

---

我为CSS中的图像设置了固定的高度：

img {
    height: 150px;
}

---

不幸的是，Internet Explorer将width - 和height - 属性添加到图像中，因此它会严重失真。我怎么能阻止这个？在追加元素后，是否必须手动删除属性？

jsFiddle link

Answer 1

试试这个：

img {
    height: 150px;
    width: auto;
}

Answer 2

你可以在你的CSS中添加！important，或者移除宽度和高度。

img {
    height: 150px !important;
}

或

i.height('').width('');