The size of the image displayed in the browser may not be its real height and width. For example, like below, we will add width and height styles to it.
<img src="IE.png">
This shows the size in the browser to be 25px. So how do we get the real size of the picture? , the following code implements this function
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<img src="IE.png" id="image">
<script>
// Set delay to ensure that the image loading is completed
setTimeout(function() {
var
real_width,
real_height,
_im = document.getElementById('image'),
im = document.createElement('img');
im.src = _im.src,
real_width = im.width,
real_height = im.height;
alert(real_width+'/n'+real_height);
},500);
</script>
</body>
</html>
Note: I have tested the above code on IE7+ and Chrome, because I cannot test it because IE6 is not installed.
Very useful code, I use it in most projects, please feel free to use it