Setting width and height of images with jquery in webkit browsers

Question

Hello!

I have an image with mypic class

I'm using the load event to set the width and height of this image:

$(window).load(function() { 
    //Here I calculate final w and h  
    $('.mypic').css("width",w);
    $('.mypic').css("height",h);
    $('.mypic').height(h);
    $('.mypic').width(w);
});

In firefox I have no problem at all but in webkit browsers the height is not set and I don't know why. It's strange since the width is set without problems. Don't know what happens with safari and chrome. Am I missing something? Could anybody help me?

Thankyou very much.

Answer 1

Try

$(function() {
   //put your code here
  $('.mypic').css({
    'width': w,
    'height': h
  });
});

I'm doing a few thing here:

Encapsulating it all in a function and passing it to the jQuery object ($) will make sure it runs when the document loads (another handy use of $).

You can make one call to CSS with a JSON object of the attributes you want to set.

Oh, and setting the CSS height and calling .height(h) are identical except for their return value (http://api.jquery.com/height/) and, as you're not using the return value, you don't need to call both.

Anyways, tested and it works in Chrome and Safari.