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,490 points
55 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,680 points

Related Questions In JQuery

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,680 points
75 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,680 points
673 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,680 points
10,233 views
0 votes
1 answer

Twitter Bootstrap: How to see the state of a toggle button?

Hii @kartik, You can see what classes the ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,680 points
335 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,680 points
8,375 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,680 points
522 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,680 points
1,833 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
522 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,680 points
53 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 4, 2020 in JQuery by Niroj
• 82,680 points
56 views