CODEWITHSUNDEEP
javascriptjqueryhtmlimagecrop
Manish
Manish

Reputation: 43

Get the Height and width of image if its responsive

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

enter image description here

This is the Mobile View

enter image description here

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

Upvotes: 0

Views: 2080

Answers (2)

Timo
Timo

Reputation: 197

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 });
});

Upvotes: 0

Ross
Ross

Reputation: 141

You can use jQuery to accomplish this:

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

Upvotes: 3

Related Questions