Using max-width = 100% and max-height = 100% on an image, calculate the display width/height
- by NatalieMac
I am creating a slideshow for images of various sizes to display centered vertically and horizontally within a canvas area.
In my CSS, I set the width and height of the image to 100% so that each image would proportionally fill the canvas. I want the canvas to auto-size itself to fit within the viewer's screensize as the original size of the images is quite large (up to 800 pixels tall).
I am using jQuery 1.4, and using the height of the image to calculate the top value for absolute positioning it to the middle of the canvas.
I have tried using jQuery to get the .height(), innerHeight(), and outerHeight(), but it always gets the full size of the image.
I extracted the DOM element from the jQuery object and tried using .width, .offsetWidth, and .clientWidth, but that too always seems to return the full size of the image.
Firebug displays the correct dimensions, so I know there's some way of calculating the actual display height of the image, I just can't figure out what it is. How do you get the actual display height of an image if you've set max-height = 100%?
I didn't want to have to calculate and set the height of each image in the js, but if I have to, I will. It just seems like I should be able to set the canvas size and have the images auto-adjust.
