-1

I am trying to get the height of an image how it appears in the browser.

The image's has been generated by the plugin: Masonry.

All the solutions I have tried do not return the correct value

enter image description here

As you can see from the two images above, the first image has a larger height than the second, however for some reason, when trying to retrieve the height of the image in the browser, they return the same height (30.59)

The options I have tried are:

img.offsetHeight img.width() img.naturalHeight

All of these say that the images are the same height, when they are clearly not.

When inspecting the elements, the analytics console shows the correct heights of the image with the upper image clearly being three times taller than the smaller one (323, 134).

How do I get the ACTUAL heights of the image of how they appear in the browser and on "inspect", rather than the values returned by .offsetHeight and .width() and naturalHeight?

Robert Carmichael
  • 188
  • 9

1 Answers1

0

You could use img.getBoundingClientRect(); https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

almerion
  • 11
  • 3
  • Incorrect answer, that just returns the same value as offsetHeight or img.width() in my case. – Robert Carmichael Mar 16 '23 at 13:23
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 21 '23 at 14:03