[jQuery] Image dimensions
I am trying to get some cross browser consistency of obtaining the
true image size.
In Firefox, there is two fields,
image.naturalWidth
image.natualHeight
IE does not recognize these fields. I think I am either over thinking
the issue, and probably not seeing something I thought jQuery provided
with cross browser width/height wrappers
Background:
I am loading a batch of images with various sizes.
<div id="photos">
<img src="title.png" style="height: 240px;" />
<img src="photo1.png" style="height: 240px;" />
<img src="photo2.png" style="height: 240px;" />
<img src="photo3.png" style="height: 240px;" />
...
<img src="photoX.png" style="height: 240px;" />
</div>
By fixing the height, the width is proportionally resized as I want
it. Under FF it behaves as I want.
However, under IE, the first image title1.png dimensions 357x115.
The height is smaller then 240px so what happens is that it resizes
the height to 240 but the width is resized proportionally
(240/115)*357 = 745 width
If I put a larger image as the first one, then its behaves ok.
I tried to use max-width, but that doesn't work under IE. I even tried
the width:expression() hacks.
So, like I said, I might be over thinking this, but this is why I want
to get the real sizes so I can adjust it.
Any tips, guidance?
Thanks