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; }

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

1 个答案: