Get the Height and width of image if its responsive

Question

How to get the height and width of image in jquery if I am using img with class "img-responsive" and not given any height, width, max-height, max-width etc.

I don't want real height and width of Image which we can get from getHeight and getWidth but I want the exact height and width which I am able to see like in mobile browsers I see small height and width and in desktop or laptop the bigger height and width.

This is the Desktop View

This is the Mobile View

I want to know that how many pixels of my screen is covered by that image.

Maybe you need http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — waternova, Mar 17 '17 at 16:52

score 3 · Accepted Answer · answered Mar 17 '17 at 16:51

3

You can use jQuery to accomplish this:

$(window).resize(function(){
    var imgWidth = $('.yourImage').width();
    var imgHeight = $('.yourImage').height();
});

answered Mar 17 '17 at 16:51

Ross

141
12

Glad I could help. – Ross Mar 17 '17 at 18:18

score 0 · Answer 2 · answered Apr 05 '23 at 07:28

For people getting here via a search engine in need of a vanilla javascript solution:

window.addEventListener('resize', function() {
  const image = document.querySelector('.yourImage');
  const { width, height } = image.getBoundingClientRect();
  console.log({ width, height });
});

Get the Height and width of image if its responsive

2 Answers2