Return to Snippet

Revision: 34651
at October 26, 2010 18:28 by bullzito


Updated Code
<script type="text/javascript">
$(document).ready(function(){
	// your selector
	$('img').each(function(index){
		var img = $(this);
		// create new image object
		var newImg = new Image();
		// get the src attribute to get the image size
		newImg.src = img.attr('src');
		// for demo purposes, used to display height and width values 
		img.hover(function(){
			$('#size').html("<b>Height:</b>" + newImg.height + "px, <b>Width:</b>" + newImg.width + "px");
		});
	});
});
</script>


// HTML MARKUP
<span id="size"> <b>Height:</b> 00px, <b>Width:</b> 00px </span>

Revision: 34650
at October 26, 2010 18:26 by bullzito


Updated Code
/* Script */
<script type="text/javascript">
$(document).ready(function(){
	// your selector
	$('img').each(function(index){
		var img = $(this);
		// create new image object
		var newImg = new Image();
		// get the src attribute to get the image size
		newImg.src = img.attr('src');
		// for demo purposes, used to display height and width values 
		img.hover(function(){
			$('#size').html("<b>Height:</b>" + newImg.height + "px, <b>Width:</b>" + newImg.width + "px");
		});
	});
});
</script>

/* HTML Markup */
<span id="size"> <b>Height:</b> 00px, <b>Width:</b> 00px </span>

Revision: 34649
at October 26, 2010 18:21 by bullzito


Initial Code
<script type="text/javascript">
$(document).ready(function(){
	$('img').each(function(index){
		var img = $(this);
		var newImg = new Image();
		newImg.src = img.attr('src');
		img.hover(function(){
			$('#size').html("<b>Height:</b>" + newImg.height + "px, <b>Width:</b>" + newImg.width + "px");
		});
	});
});
</script>

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

Initial Description
Use this snippet to get the native image size of an image if it is resized with CSS or IMG attributes. Requires jQuery.

Initial Title
Native Image Size with jQuery

Initial Tags


Initial Language
JavaScript