Internet Explorer adds height- and width-attributes to a newly appended image automatically

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

Answers:

Answer

Try this:

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

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

img {
    height: 150px !important;
}

or

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.