naturalWidth
and naturalHeight
You can easily find the original or intrinsic width and heigh of an image using the HTML5 image naturalWidth
and naturalHeight
properties. These properties are supported in all major web browsers such as Chrome, Firefox, Safari, Opera, Internet Explorer 9 and above.
Let's take a look at an example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
Alternatively, if you want to perform the same task with jQuery you can use the load()
method in combination with the attr()
method, as shown in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Create dummy image to get real width and height
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
});
});
});
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button">Get Original Image Size</button></p>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to stop firing event until an effect is finished in jQuery
Use the jQuery callback function You...React JS Axios File Upload Example
In this tutorial, we will provide you ex...phpMyAdmin Automatic Logout Time
phpMyAdmin is open-source web based appl...Laravel 8 Authentication using Livewire Jetstream
Today, let's optically discern the p...Read the Current full URL with React
Current url holds data to display or sho...