Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript Get Image Width Height With JQuery And JavaScript

Get Image Width Height With JQuery And JavaScript

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>

<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>

<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>

<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>

[download id=”4″ format=”1″]
Jul 12, 2011Hoan Huynh
Delete Bulk Draft And Trash WordPress Posts Includes All Tags, Comments, Meta Fields And Terms AssociatedAsp.net C# Create MD5 Hash
You Might Also Like:
  • PHP Get Image Width And Height
  • PHP Get Remote Image Width Height
  • JavaScript Open A New Tab With JQuery
  • Jquery checkbox checked
  • FancyBox Redirect To A Predefined URL When Click On Image
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • JQuery Create Textbox With Count Down Limit Characters
  • JQuery How to use DatePicker
  • Validate Date With JQuery And Date Object
  • JQuery Read Rows And Columns Of HTML Table
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

11 years ago JavascriptgetElementById, JQuery826
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,459 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,839 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,656 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,994 views
C# Read Json From URL And Parse/Deserialize Json
11,722 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development