Posted By

bullzito on 10/26/10


Tagged

javascript-resize-image-jquery-size-native


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

bullzito
Tyster
terrencewood


Native Image Size with jQuery


 / Published in: JavaScript
 

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

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

  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>

Report this snippet  

You need to login to post a comment.