Internet Explorer автоматически добавляет атрибуты высоты и ширины к вновь добавленному изображению

Я добавляю вновь созданное изображение после его загрузки в 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

Ответ 1

Попробуйте следующее:

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

Ответ 2

Вы можете либо добавить! важно для своего css, либо удалить ширину и высоту attrs.

img {
    height: 150px !important;
}

или

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