dev/web

[JS] 이미지 리사이즈 스크립트

재삐신생 2014. 7. 13. 17:00
반응형

목적 : 부모 div박스안에 이미지를 비율에 맞게 컨트롤 한다.

유용한게 쓰던 스크립트는 오늘 새로 손을 보았다.


int_resizeimage2=0;

resizeimage2 = function(obj,boxsize_w,boxsize_h,outsize_w,outsize_h,isFill,longpic_proc,callback) {

var ratio=0,box_ratio=0,target_w,target_h,$parent = $(obj).parents('div');

if(typeof(isFill)=="undefined") isFill=false;//default value

try{

if(boxsize_w=="auto") boxsize_w=$parent.width();

boxsize_h = boxsize_h || boxsize_w;

ratio=$(obj).width()/$(obj).height();

box_ratio=boxsize_w/boxsize_h;

longpic_proc = longpic_proc || false;

if(ratio==0 || $(obj).width()==0 || $(obj).height()==0){

int_resizeimage2=setinterval(function() { resizeimage2(obj,boxsize_w,boxsize_h,outsize_w,outsize_h,longpic_proc); },500);

return;

}else{

ratio=parseInt(ratio*100)/100;

box_ratio=parseInt(box_ratio*100)/100;

}

if(longpic_proc && Math.abs(ratio)>2.5){ //긴그림처리

boxsize=boxsize*(1.5);

}

if(ratio>box_ratio){//가로

target_w = isFill ? parseInt(ratio*boxsize_h) : boxsize_w;

target_h = isFill ? boxsize_h : parseInt((1/ratio)*boxsize_w);

}else if(ratio<box_ratio){//세로

target_w = isFill ? boxsize_w : parseInt(ratio*boxsize_h);

target_h = isFill ? parseInt((1/ratio)*boxsize_w) : boxsize_h;

}else{//정사이즈 or 오류

target_w = boxsize_w;

target_h = boxsize_h;

}

$(obj).width(target_w);

$(obj).height(target_h);

outsize_w = outsize_w || boxsize_w;

outsize_h = outsize_h || boxsize_h;

if(isFill) $parent.css("overflow","hidden");

$(obj).css("position","absolute").css("top",(outsize_h-$(obj).height())/2+"px").css("left",(outsize_w-$(obj).width())/2+"px");


clearinterval(int_resizeimage2);

if(typeof(callback)=="function") callback();

}catch(e){

}

}


반응형