JavaScript - function to get real image width & height (cross browser)

Question

as the title

Answer 1

Yay, Google!

There's a few ways to do this depending on exactly what you need (which you have unhelpfully omitted to include). Probably the simplest in a general sense is to get a reference to the Image object and inspect the width and height properties.

Answer 2

jquery + <img src="" ... id="hello" /> + $("#hello").width()

Answer 3

First of all, you have a greater chance of getting your question answered if you'd just ask it in a more polite way, and supplying as much relevant information as possible.

Anyway...

For as far as I know, you can use the .width property across pretty much all browsers:

function getDimensions(id) {
    var element = document.getElementById(id);
    if (element && element.tagName.toLowerCase() == 'img') {
        return {
            width: element.width,
            height: element.height
        };
    }
}

<img id="myimage" src="foo.jpg" alt="" />

// using the function on the above image:
var dims = getDimensions('myimage');
alert(dims.width); --> shows width
alert(dims.height); --> shows height

Answer 4

This solutions is fine if the image has it's real size on a webpage, does someone know how to get the real height of a image that has been set to smaller via image attribute width and height? I have read about naturalHeight and naturalWidth on sites but that does not seem to work at all...