In some case, you may need to read the Width and Height property of a particular image dynamically. These scenario could be just detect an image dimensions, adjust image to fit the design or view an image in a same size popup.
In order to do that, you have to know its ID attribute then you either of following methods: using JQuery or JavaScript.
1. Using JQuery to get image Width and Height
<script type="text/javascript">
function jquery_get_width_height()
{
var imgWidth = $("#img").width();
var imgHeight = $("#img").height();
alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight);
}
</script> |
2. Using JavaScript to get image Width and Height
<script type="text/javascript">
function javascript_get_width_height()
{
var img = document.getElementById('img');
alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height);
}
</script> |
Example and demo source code
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function javascript_get_width_height()
{
var img = document.getElementById('img');
alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height);
}
function jquery_get_width_height()
{
var imgWidth = $("#img").width();
var imgHeight = $("#img").height();
alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight);
}
</script>
</head>
<body>
<img id="img" src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br>
<input type="button" value="Get Width Height With JavaScript" onClick="javascript_get_width_height()" ><br>
<input type="button" value="Get Width Height With JQuery" onClick="jquery_get_width_height()" ><br>
</body>
</html> |
