/*--------------------------------------------
마우스로 이미지크기 변경하기
---------------------------------------------*/
<span contentEditable><img src="http://www.ihelpers.co.kr/programming/css/pic.jpg"></span>
출처 : http://sir.co.kr/bbs/board.php?bo_table=pl_dhtml_javascript&wr_id=520&page=4
/*--------------------------------------------
이미지 리사이즈 01
---------------------------------------------*/
function resizeImg(imgObj, max_width, max_height){
var dst_width;
var dst_height;
var img_width;
var img_height;
img_width = parseInt(imgObj.width);
img_height = parseInt(imgObj.height);
if(img_width == 0 || img_height == 0){
imgObj.style.display = '';
return false;
}
// 가로비율 우선으로 시작
if(img_width > max_width || img_height > max_height) {
// 가로기준으로 리사이즈
dst_width = max_width;
dst_height = Math.ceil((max_width / img_width) * img_height);
// 세로가 max_height 를 벗어났을 때
if(dst_height > max_height) {
dst_height = max_height;
dst_width = Math.ceil((max_height / img_height) * img_width);
}
imgObj.width = dst_width;
imgObj.height = dst_height;
}
// 가로비율 우선으로 끝
imgObj.style.display = '';
return true;
}
출처 : http://blog.naver.com/tppsc?Redirect=Log&logNo=60013576412
/*--------------------------------------------
이미지 리사이즈 02
---------------------------------------------*/
<body>
<img name=i0 src="http://kr.img.blog.yahoo.com/ybi/1/8c/75/kiseke/folder/3338845/img_3338845_1238887_0?1112168382.jpg" onload=setD(500,0) onclick=vuD();>
<script>
io=new Array(); //이미지객체의 크기를 담을 배열
function vuD(){ //이미지를 클릭하면 새창을 띄워 원래의 크기로 보여준다.
e=event.srcElement;
var w=io[e.name].w; //이미지 객체의 너비
var h=io[e.name].h; //이미지 객체의 높이
test=window.open('','tst','width='+w+',height='+h); //새창을 이미지의 크기만큼 열고
test.document.write("<body topmargin=0 leftmargin=0 background="+e.src+" onclick=self.close()>"); //새창에 배경으로 그림을 뿌림
}
function setD(wd,ht){
e=event.srcElement; //함수를 호출한 이미지객체
var w=e.width; //너비
var h=e.height; //높이
io[e.name]=new Object(); //새로운 오브젝트 생성
io[e.name].w=e.width; //너비와,
io[e.name].h=e.height; //높이를 지정
if(w>wd){ //너비가 한계치보다 크면
h/=w/wd; //높이 재설정
w=wd; //너비 재설정
}
e.width=w; //너비 갱신
e.height=h; //높이 갱신
}
</script>
출처 : http://blog.naver.com/soul3532/100021699271
