Set div width and height using an external image?

Question

I'm trying to get the width and height of an external image and use the width and height to set a Div's width and height in my page.

I can easily get the image width and height but I cannot use the width/height for my div for some strange reason!

To explain this better, I've created this fiddle:

https://jsfiddle.net/qtc3q6sd/2/

And this is my entire code:

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.width);
  $("#mydiv").css("width", $(this.width()));
  $("#mydiv").css("height", $(this.height()));
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

could someone please advise on this issue?

Thanks in advance.

Answer 1

You are getting the width and the height the wrong way.

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
  $("#droppable").css("width", this.width);
  $("#droppable").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

See jsfiddle .

Answer 2

Nothing wrong with the logic of your code. just a syntax error.

it should be $(this).width() instead of $(this.width())

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.width);
  $("#mydiv").css("width", $(this).width());
  $("#mydiv").css("height", $(this).height());
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

Answer 3

Syntax is just a bit off,

try this

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
  $("#mydiv").css("width", this.width);
  $("#mydiv").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

Answer 4

Here is your solution. Inside your callback function, this is the image

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
  $("#mydiv").css("width", this.width + 'px');
  $("#mydiv").css("height", this.height + 'px');
}
img.src =   'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

Answer 5

Your code has two mistakes.

First, inside the onload function 'this' represents the image object. You're trying to call the with() and height() functions of the image, but they're not functions, they are properties. You must lose the '()'.

Second, when you try to do this $(this.width()) you're encapsulating the width value in a jQuery object. You don't need that, just use the width property this.width .

The code below will work:

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.width);
  $("#mydiv").css("width", this.width);
  $("#mydiv").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';