Get the clientWidth and clientHeight of resized image

Question

I am resizing an image in JavaScript based on the current viewport size. No media queries and other such things, JS all the way, and no static sizes for elements.

So basically it looks something like this:

    var computedHeight = viewport.height * someRatio;
    var image = goog.dom.createDom('img', {
        'src': 'the.link.to.the.image',
        'height': computedHeight + 'px',
        'width': 'auto'
    };

Answer 1

As the others said, you can't get the size before the image has been inserted into the document.

But you can calculate the size on your own.

When the image has been loaded, you may access the original size of the image. Based on this it's not very difficult to calculate the scaled size:

    var image = goog.dom.createDom('img', {
    'src': 'the.link.to.the.image',
    'height': computedHeight + 'px',
    'width': 'auto',
    'onload':function(){
      alert('width:'+
            Math.floor((this.naturalWidth*this.height)/this.naturalHeight)+
            '\nheight:'+this.height);        
    }
});

Answer 2

After the image has been displayed try querying the following properties

image.offsetWidth
image.offsetHeight

Answer 3

Try goog.style.getComputedStyle(image, 'width'). Probably you'll need to add it to the document first.