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

var i = $('<img/>');
i[0].src = '';
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

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

• javascript
• jquery
• css
• internet-explorer

• IE doesn't add tags to the markup, something else is doing it. – TravisO Commented Sep 20, 2013 at 17:59
• just add width as well !! jsfiddle/aEaEN – Hussein Nazzal Commented Sep 20, 2013 at 17:59
• 1 @TravisO If you inspect the fiddle you see, that there are the attributes set in IE. – lampshade Commented Sep 20, 2013 at 18:05
• @codeiz Yes, width set to auto did the trick. I was sure I tested it, but I must missed it somehow. I can't set a fixed width, as the width is unknown. – lampshade Commented Sep 20, 2013 at 18:06
• IE does not add attributes, but it scales the image so that width : height ratio is not preserved. – Jukka K. Korpela Commented Sep 20, 2013 at 18:12

2 Answers 2

Try this:

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

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

img {
    height: 150px !important;
}

or

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