자바스크립트 - 이미지 리사이즈
1 <script language="javascript">
2 <!--
3 function resizeImg(imgObj) {
4 // 이미지 별도 로딩으로 원래 사이즈 추출
5 var maxHight=265; // 최대 이미지 사이즈
6 var maxWidth=320; // 최대 이미지 사이즈
7 var imgOriginal = new Image();
8 imgOriginal.src = imgObj.src;
9 // 가로와 세로 중 어느걸 기준으로 줄일지 결정
10 if(imgOriginal.width >= maxWidth && imgOriginal.height >= maxHight ){
11 var baseAxis;
12 if ( (imgOriginal.width / maxWidth) > (imgOriginal.height / maxHight) ){
13 baseAxis = 'width';
14 }else{
15 baseAxis = 'height';
16 }
17
18 // 결정된 기준을 바탕으로 나머지 길이를 리사이징
19 if (baseAxis == 'width') {
20 imgObj.height = Math.round(imgOriginal.height *(maxWidth / imgOriginal.width));
21 imgObj.width = Math.round(imgOriginal.width * (imgObj.height / imgOriginal.height));
22 }else{ // baseAxis == 'height'
23 imgObj.width = Math.round(imgOriginal.width * (maxHight / imgOriginal.height));
24 imgObj.height = Math.round(imgOriginal.height *(imgObj.width / imgOriginal.width));
25 }
26
27 }else if(imgOriginal.width >= maxWidth && imgOriginal.height < maxHight ){
28 imgObj.width = maxWidth;
29 imgObj.height = Math.round(imgOriginal.height *(maxWidth / imgOriginal.width));
30
31 }else if(imgOriginal.width < maxWidth && imgOriginal.height >= maxHight ){
32 imgObj.width = Math.round(imgOriginal.width * (maxHight / imgOriginal.height));
33 imgObj.height = maxHight;
34
35 }else{
36 imgObj.height=imgOriginal.height;
37 imgObj.width=imgOriginal.width;
38 }
39 }
40 //-->
41 </script>
42
43 <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#DDDDDD">
44 <tr>
45 <td height="310" bgcolor="#FFFFFF" align="center">
46 <img src="이미지 경로" id="bg" name="imgsrc" onload="resizeImg(this);"></td>
47 </tr>
48 </table>