获取源中未指定宽度和高度的图像的图像尺寸答案

【问题标题】：Getting image dimensions for images that do not have width and height specified in source获取源中未指定宽度和高度的图像的图像尺寸
【发布时间】：2012-12-11 07:30:07
【问题描述】：

我想获取在 HTML 源代码中没有指定宽度和高度标记的图像的高度和宽度。

即

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

我想要做的是在加载之前获取图像的宽度和高度。我正在努力完成以下任务，如果您知道更好的解决方案，请建议我。

我想这样做是因为我想将我网站中的所有图像保持在小于或等于 600 像素。因此，如果图像的宽度 > 600 像素，我会将其缩小到 600 像素。否则我保持它的宽度不变。

我的试用：下面的代码都不适用于此任务，因为它们会在加载图像后获取图像的大小；最初它们的宽度显示为零。

<script type="text/javascript">
  var img = document.getElementById('my_img');
  var width = img.clientWidth;
  var height = img.clientHeight;
  alert('Width: ' + width + ' Height:' + height); // FAIL

  var timg = document.getElementById('test').width;
  alert(timg);  // FAIL too
</script>

我的 HTML 代码：

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

希望这很清楚。

谢谢。

【问题讨论】：

"我要做的是在加载之前获取图像的宽度和高度。" ——好吧，如果可能的话，浏览器会为你做这件事。您需要等待信息。
使用 JQuery : $('#my_img').height() 和 $('#my_img').width() 检索图像大小。但在您的情况下，您需要使用@Giona 提出的 CSS
@sdespont 我认为在页面中加载图像后这将起作用，对吗？ printfmyname，我认为您可以在服务器端代码中执行此操作，例如 java 或 php。
图像的高度和宽度只有在图像被浏览器检索/加载后才能知道。

标签： javascript jquery ajax

【解决方案1】：

jsFiddle

为什么使用 JavaScript？使用此 CSS 规则，您可以将宽度限制为 600px：

#my_img { max-width:600px; }

【讨论】：

这样一个天才的答案.. 感谢 Giona 和 arttronics。其他人都花时间回答。