2

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

IE

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

希望这很清楚。

谢谢你。

4

1 回答 1

6

jsFiddle

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

#my_img { max-width:600px; }
于 2012-12-25T07:58:18.497 回答