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

Question

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

即

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

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

我想这样做是因为我希望将我网站中的所有图像保持在小于或等于600px.因此,如果图像的宽度> 600px,我将其减少到600px.或者我保持宽度不变.

我的试用:以下代码都不适用于此任务,因为它们在图像加载后得到图像的大小; 最初它们的宽度显示为零.

<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" />

希望这很清楚.

谢谢.

Answer 1

的jsfiddle

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

#my_img { max-width:600px; }