javascript - 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 链接

Answer 1

试试这个：

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

Answer 2

您可以添加 !important 到您的 CSS，或删除宽度和高度属性。

img {
    height: 150px !important;
}

或者

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