목적 : 부모 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){
}
}
'dev > web' 카테고리의 다른 글
camel case vs snake(underscore) case (0) | 2016.01.23 |
---|---|
"Data truncated for column 'column_name' at row 1" 고찰 (0) | 2015.09.10 |
ajax 호출시 응답 데이터타잎에 대해.. (0) | 2014.07.05 |
inline-block 여백 버그 (1) | 2014.06.25 |
팝업차단을 피하는 방법-네이버앱 (0) | 2014.04.07 |