Internet Explorer adds height- and width-attribute

Question

I append a newly created image after it has been loaded to the DOM:

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

---

I have set a fixed height for the images in CSS:

img {
    height: 150px;
}

---

Unfortunately the Internet Explorer adds the width- and height-attributes to the image so it gets heavily distorted. How can I prevent this? Do I have to manually remove the attributes after I append the element?

jsFiddle link

Answer 1

You can either add !important to your css, or remove the width and height attrs.

img {
    height: 150px !important;
}

or

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

Answer 2

Try this:

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