jQuery 이미지(img) 넓이(width)와 높이 구하기(height) | Client Side

이미지 넓이랑 높이 구하는 법.


$(document).ready(function(e) {

    $("img").each(function() {


         $(this).load(function(){ //이미지를 다 불러온후 확인하기 위해
	   var imgWidth = this.naturalWidth; //이미지 크키가 정해져 있지 않을때 

var imgWidth2 = $(this).width(); //이미지 크키가 정해져 있을때

         });
    });
});



우선 코드는 위와 같음.


포인트만 2개 잡아 보자면


첫번째 포인트  $(this).load(function(){


이부분이 될수 있겠다. 그냥 $(this).width() 하면 값이 0 이 나올수도 있다.


그래서 이미지를 다 불러온후 크기를 확인하기 위해 위와같이 load 를 쓴다.


그리고 두번째 포인트 this.naturalWidth$(this).width() 의 차이다.


img에 예를 들어서 style 일이나 아니면 width 값이 써져있으면 그냥 $(this).width() 로 해도


크기가 잘 나오는데 만약  크기가 정해져 있지 않으면 크키값이 이또한 0으로 나온다.


그럴땐 this.naturalWidth 로 해야 정확한 값이 나온다.


높이는 당연히 height() naturalHeight로 구한다.


width,height,이미지크기,naturalWidth
Comment Write
Comment List
Mania 2020.11.28 16:09              
이미지 사이즈가 계속 0으로 나와서 애먹었는데, 도움이 되었습니다.
스냅 2014.12.15 09:56              
감사합니다 :)