Jquery Resizable Image size问题答案

【问题标题】：Jquery Resizable Image size issueJquery Resizable Image size问题
【发布时间】：2011-01-12 03:50:03
【问题描述】：

使用 jquery resizable 时不会自动检测图像大小。 Firefox 和 IE 显示的图像都小得多，而 chrome 则根本不显示任何内容。我似乎无法找到这个问题的直接答案。如何解决这个问题。

  <link rel="stylesheet" href="http://ajax.googleapis.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>

【问题讨论】：

您能否发送一个指向该页面的链接，或者该页面其余部分的代码？谢谢:)
没有页面或其余代码。只需运行上面的这段代码，看看我在做什么。
@alex 在 jsfiddle 中显示良好：jsfiddle.net/Damien_at_SF/cLWcx
原始尺寸：450px×338px... 初始渲染尺寸：450x338
图片尺寸为450px × 338px。这不是它在您的 jsfiddle 链接中的显示方式。它显示为一个小图标。这就是它在 Firefox 和 IE 中的显示方式。在 Chrome 中它根本不显示。如果您缓存了图像，请进行几次刷新。

标签： jquery image resizable

【解决方案1】：

不知道为什么 webkit 会这样。

解决方法是确保在图片的load-event完成后调用resizable。

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

在不相关的旁注中，如果您这样做会更好

给图像一个id并调用它用那个 id
正确关闭img标签

【讨论】：

令人难以置信的优雅答案，比我在这里的答案要好得多...+1 :)
不用担心 :) 老实说，我不太确定...似乎很奇怪，我可以在 FF 中看到它，但亚历克斯只看到缩略图...嗯..

【解决方案2】：

@alex 显示了调整图像大小的正确方法。我在 Chrome 上测试它显示了实际的高度和宽度。请重新配置您的浏览器。有时浏览器配置不好..所以它发生..请检查代码http://bit.ly/gM8sSD

【讨论】：

我会从我之前的回答中删除指向 jsfiddle 的链接，这是一个不擅长 naveen 的 hacky 解决方案