jQuery 이미지 사이즈 조절

안녕하세요. 은은한 개발자입니다.
 
jQuery로 이미지 사이즈를 조절하는 방법에 대해 포스팅해보도록 하겠습니다.
 

$(document).ready(function() {

 $('.modal-img').each(function() {

 var maxWidth = 680; // Max width for the image

 var maxHeight = 680;    // Max height for the image

 var ratio = 0;  // Used for aspect ratio

 var width = $(this).width();    // Current image width

 var height = $(this).height();  // Current image height



 // Check if the current width is larger than the max

 if(width > maxWidth){

 ratio = maxWidth / width;   // get ratio for scaling image

 $(this).css("width", maxWidth); // Set new width

 $(this).css("height", height * ratio);  // Scale height based on ratio

 height = height * ratio;    // Reset height to match scaled image

 }



 var width = $(this).width();    // Current image width

 var height = $(this).height();  // Current image height



 // Check if current height is larger than max

 if(height > maxHeight){

 ratio = maxHeight / height; // get ratio for scaling image

 $(this).css("height", maxHeight);   // Set new height

 $(this).css("width", width * ratio);    // Scale width based on ratio

 width = width * ratio;    // Reset width to match scaled image

 }

 });

});

원하는 maxWidth(최대넓이) 값과 maxHeight(최대높이) 값을 대입한다.