jQuery 이미지를 div박스 안에서 비율로 처리하기
간혹 픽셀 보다는 % 처리를 하여 동적으로 대응 되도록 해야 되는 경우가 있습니다.
이런 경우 처리 방법에 대한 것입니다.
jQuey를 사용하였는데 바닐라로도 큰 차이는 없습니다.
중요한 부분은 배열로 처리 한다는것입니다.
var boxNum = 2;
var imgNum = 1;
// 이미지크기
var imgWidth = $('#img_'+imgNum).outerWidth();
var imgHeight = $('#img_'+imgNum).outerHeight();
// div 박스 크기
var boxWidth = $('#page'+boxNum).outerWidth();
var boxHeight = $('#page'+boxNum).outerHeight();
// 이미지가 div박스에서 차지하는 비율을 구한다
var percent_x = imgWidth / boxWidth * 100;
var percent_y = imgHeight / boxHeight * 100;
// 적용
ui.element.css({ width: percent_x+"%", height: percent_y+"%" });
위에서 ui가 있는것은 jQuery drag 이거나 resize 이면 ui 값을 파라미터로 받아 옵니다.
resize의 경우에는 resize 되면서 비율로 처리가 됩니다. 확인해 보는 방법은 개발자 도구(F12)를 통해서 실시간으로 변하를 것을 볼 수 있습니다.
관련링크