有时候我们会遇到需要获取图片的实际尺寸的情形，而图片的width和height属性并代表图片的实际尺寸。

还好现代浏览器提供了在<img>元素上提供了naturalWidth和naturalHeight两个属性，用于获取图片的实际尺寸。

1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', function() {
  const image = document.querySelector('img');

  console.log(image.naturalWidth);    // => 图片的实际宽度
  console.log(image.naturalHeight);    // => 图片的实际高度
});

兼容性

这两个属性兼容性良好，包括IE9的现代浏览器都支持。可参看MDN上关于这两个属性的兼容性说明

参考

MDN HTMLImageElement