image real size

by roXon

HTML

<img id="myImage" src="https://i.stack.imgur.com/1ZIkv.jpg?s=328&g=1">

CSS

#myImage{
    margin: 60px;  /* see properties x/y */
    height: 100px; /* see properties w/h */
}

JavaScript

var $img = $("#myImage");
alert(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
);