jQuery innerwidth/innerheight not working properly with images in Chrome/Safari

Question

I'm trying to get the width and height of a number of images of different sizes on a page using the following code on each image:

img.width = img.innerWidth() + img.borderWidth.left + img.borderWidth.right;
img.height = img.innerHeight() + img.borderWidth.top + img.borderWidth.bottom;

For some reason, both innerWidth() and innerHeight() are returning strange values in Chrome/Safari. Here's a comparison of what the code above return for the same image on Firefox vs Chrome:

FIREFOX:
img.width = 736
img.height = 542

CHROME (SAFARI is similar to this):
img.width = 656
img.height = 36

The Firefox values are more or less correct, in terms of the actual (visible) image dimensions.

It's not possible for me to define the image sizes in the CSS, because all the images have different aspect ratios. How to solve this, or at least work around it?

Answer 1

try with width:100%;height:100%;