본문 바로가기
개발/jQuery

jQuery를 이용한 이미지 크기 줄이기

by 비손 2010. 8. 12.
양 변 모두 크기 제한에 걸리는 모드만 테스트 해 보고 나머지는 걍 테스트 안해봤습니다.
급하게 뭔가를 만드는 중이어서 ....
되겠죠 뭐~ 허헛... 안되면 수정 좀 하시면 될 거라 생각합니다.
오류가 있다면 댓글 달아주세요~

보시면 아시다시피... ul > li > a.thumb > img 태그에 적용되도록 했습니다.


$("ul li a.thumb img").each(function() {
          // 모드가 0이면 두 변 중 더 긴 변의 길이가 제한에 걸리도록 합니다.
          // 모드가 1이면 가로 길이가 제한에 걸리도록 합니다.
          // 모드가 2이면 세로 길이가 제한에 걸리도록 합니다.
          var mode = 0;
          var restrict_length = 75;
          
          // 이미지를 가져옵니다.
          var img = new Image();
          img.src = $(this).attr("src");
          
          // 현재 이미지의 비율을 저장해 둡니다.
          var ratio = img.width / img.height; // 비율
          
          // 모드를 확인한 후에 세로를 기준으로 줄일 것인지 가로를 기준으로 줄일 것인지 결정합니다.
          if((mode == 0 && img.width > img.height) || mode == 1) {
           // 가로 길이가 제한보다 긴 경우에만 작동합니다.
           if(img.width > restrict_length) {
            var newheight = Math.round(restrict_length / ratio);
            $(this).attr({width:restrict_length, height:newheight});  // 폭과 높이를 새로 지정
           }
           
          } else {
           // 세로 길이가 제한보다 긴 경우에만 작동합니다.
           if(img.height > restrict_length) {
            var newwidth = Math.round(restrict_length * ratio);
            $(this).attr({width:newwidth, height:restrict_length});  // 폭과 높이를 새로 지정
           }
          }
     });