Question

I have a responsive layout with some images. The images have max-width:100% set. And the height cannot be preset in the CSS or the HTML height attribute, or else the image distorts as the responsive layout gets smaller. It has to be height: auto; in order to scale properly.

Is it possible to calculate the height of the image in jQuery? .height() and .css('height') relies on the css or height attrib to be set, and like I said, I cannot set those without distorting the image when the responsive design changes size.

Answer 1

My problem ended up being that .height() and .css('height') were returning 0 because the image(s) had not loaded yet when that code was called.

In order to get the height, I ran the following:

$(document).ready(function(){
  $('img.whatever').load(function(){
    console.log($(this).height()); // calculates height correctly after image is loaded.
  });
});