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

Question

我想获取未在HTML源代码中指定其width和height标签的图像的高度和宽度。

即

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

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

我想要这样做是因为我想将网站中的所有图像都保留为小于或等于600像素。 因此，如果图像的宽度> 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; }