How to Get the real width and height of an image with JavaScript

0 votes

I am creating a jQuery plugin.

How do I get the real image width and height with Javascript in Safari?

The following works with Firefox 3, IE7 and Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

But in Webkit browsers like Safari and Google Chrome values are 0.

Nov 25, 2020 in JQuery by kartik
• 37,500 points
140 views

1 answer to this question.

0 votes

Hello,

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I'd recommend using an image's onload event. Here's a quick example:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

To avoid any of the effects CSS might have on the image's dimensions, the code above makes an in memory copy of the image. 

answered Nov 25, 2020 by Niroj
• 82,740 points

Related Questions In JQuery

0 votes
1 answer
0 votes
1 answer

How to get the children of the $(this) selector?

Hello @kartik, The jQuery constructor accepts a 2nd ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,740 points
140 views
0 votes
1 answer

How to set the 'selected option' of a select dropdown list with jquery

Using the jQuery change() method; you can ...READ MORE

answered Jun 17 in JQuery by rajatha
• 7,040 points
40 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,743 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,276 views
0 votes
1 answer

How to enable Bootstrap tooltip on disabled button?

Hii @kartik, You can wrap the disabled button ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
3,159 views
+1 vote
2 answers

How to set cache false for getJSON in jQuery?

You can't pass any configuration parameters to ...READ MORE

answered Oct 7, 2020 in JQuery by Amit
• 140 points
1,344 views
0 votes
1 answer

How to get the size of the screen, current web page and browser window?

Hello @kartik, You can get the size of ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,740 points
122 views
0 votes
1 answer

How to get the first element of an array?

Hello @kartik, Try this: alert(ary[0]) Hope it helps!! Thank you ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,740 points
139 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP