Jquery Resizable Image size issue

Image size is not automatically detected when using jquery resizable. Both Firefox and IE displays the image much smaller, and chrome show nothing at all. I can't seem to find a direct answer to this issue. How can this be fixed.

  <link rel="stylesheet" href="http://ajax.googlea开发者_开发知识库pis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">
</script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript">
</script>

  <img src="http://www.carsyouwilldrive.com/wp-content/uploads/2009/06/futurecar1.jpg"> <script type="text/javascript">
$("img").resizable();
  </script>

Don't know why webkit is acting like this.

Workaround is to ensure that resizable is called after the load-event of image is completed.

$("img").load(function () {
    $("img").resizable();
});

On an unrelated side note it would be better if you

1. give the image an id and call it with that id
2. close the img tag properly

@alex shows right way to resize image. I tested on Chrome it shows actual height & width. please reconfigure your browser. sometimes browser not configure well.. so it occurs.. please check code http://bit.ly/gM8sSD