Question

I am trying to duplicate the way Google displays background image on its main page. Basically here is my code rewrite of it:

<img style="width: 1279px; height: auto; left: 0px; opacity: 0.99999;" src="<?php echo    $_COOKIE['otakuplus_bg']; ?>" id="cpBackgroundImg">

The problem with this is if you look into Googles homepage they actually get the image’s dimensions, so in this case, my width is 1279px while height is auto.

This is because I entered the with into CSS manually. However, google seems to get the exect same data in a different manner; probably via JS.

So, their data would be:

width: 1279px; height: 959.25px; 

…for the same image. I have to rely on auto for the height. If you know of a way I can do this with jQuery, please tell me. Thank you in advance.

Answer 1

Using JQuery:

width of that element

var imgWidth = $("#cpBackgroundImg").width();
alert(imgWidth);

height of that element

var imgHeight = $("#cpBackgroundImg").height();
alert(imgHeight);

Now you should hopefully have the width and height stored in JQuery, you can do what you want with it. http://jsfiddle.net/robx/BHyLJ/