Advanced Search

Native Image Size with jQuery

/ Published in: JavaScript
Save to your folder(s)
Use this snippet to get the native image size of an image if it is resized with CSS or IMG attributes. Requires jQuery.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. 	// your selector
  4. 	$('img').each(function(index){
  5. 		var img = $(this);
  6. 		// create new image object
  7. 		var newImg = new Image();
  8. 		// get the src attribute to get the image size
  9. 		newImg.src = img.attr('src');
  10. 		// for demo purposes, used to display height and width values 
  11. 		img.hover(function(){
  12. 			$('#size').html("<b>Height:</b>" + newImg.height + "px, <b>Width:</b>" + newImg.width + "px");
  13. 		});
  14. 	});
  15. });
  16. </script>
  17.  
  18.  
  19. // HTML MARKUP
  20. <span id="size"> <b>Height:</b> 00px, <b>Width:</b> 00px </span>

URL: http://marioluevanos.com/playground/Native%20Image%20Size/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.