js naturalWidth与naturalHeight属性是获得图片原始的尺寸,不会因外部width和height属性设置的改变而改变。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img id="image" src="2.png" style="display:block;" width="100" height="100" /> <script> window.onload = function(){ var image = document.getElementById("image"); console.log("原始宽度:"+image.naturalWidth); console.log("原始高度:"+image.naturalHeight); console.log("宽:"+image.width); console.log("高:"+image.height); } </script> </body> </html>
运行结果:
我们可以看到,这个原始宽高,不受设置的影响。
需要注意的是:
图片必须提前加载,否则,图片原始宽高均为0,如下图: