Using max-width = 100% and max-height = 100% on an image, calculate the display width/height

Question

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.

Answer 1

I suggest to turn the images back to auto, and then get the image values, then set them back to 100%.

$('img').each(function(){
   var self = $(this);
   self.hide() // Hide them, fading, you choose
      .css({'width':'auto', 'height':'auto'}) // set them to auto.
      .data('width', self.width())  // Now you can get the real size
      .data('height', self.height()) // And store it as jQuery data in the image.
      .css({'width':'100%', 'height':'100%'}) // Back to 100%
      .show();  // Show them.
});

or, other way

$('img').hide().css({'width':'auto', 'height':'auto'})
   .each(function(){
      var self = $(this);
      self.data('width', self.width())
          .data('height', self.height());
   })
   .css({'width':'100%', 'height':'100%'}).show();

Or no need to hide them, since probably the change is too fast, but you might need to do some adjustments to your logic, so that the user doesn't see a blink, during the first load.

either way, pick your poison.