I’m loading an image in IE8 as follows:
var img = document.createElement('img');
img.src = 'images/starnohighlight.png';
The image is 30x30px @150dpi.
When I add the image to the page:
td.appendChild(img);
the image is displayed at a much enlarged size of 324×308. I know I could simply force it to be 30×30, because I know the dimensions of the source image, but I’d much prefer to just provide a 30×30 image on disk and display it in it’s native size. If I need to change the resolution of the image (to say 72dpi) that’d be fine, too, or I could at least account for that in the code.
I haven’t tested on other browsers, simply because I don’t have access to any currently.
So, the question, in sum: how can I display an image loaded as above at the native size?
Edits:
I’ve also tried this with the same result:
var imgObj = new Image();
imgObj.src = 'images/starnohighlight.png';
I’ve removed all styles from the document. Still the same problem.
If you display an image like that, with no other settings affecting it, it will be displayed in the native size.
The resolution (PPI or DPI) setting in the image is ignored by the browser, so changing that will have no effect.
If the image is not showing up in the native size, you have some other setting affecting the image tag. You can use the developer tools (F12) in IE to examine what styles are actually affecting the element.