본문 바로가기

Javascript Tip

[javascript] 웹페이지내 이미지 사이즈를 임의로 조절하기 위한 함수

반응형

웹페이지내 이미지 사이즈를 임의로 조절하기 위한 함수

 

parameter info

targetImg : 변경 대상이 되는 이미지의 경로

wsize : 최대 width 범위

hsize : 최대 height 범위

divImg : 변경된 이미지가 포함될 div Tag ID

 

function fImgSize(targetImg,wsize,hsize, divImg) //그림의 이미지 사이즈 구하기.
{
    var imgw;
    var imgh;
    var timgw;
    var timgh; 


    var newImg = new Image();

    newImg.src = targetImg;
    imgw = newImg.width;
    imgh = newImg.height;

 

    if (imgw <= wsize && imgh <= hsize ) { // 사이즈가 공간 보다 크면 같은 비율로 줄여서 보여 준다.
       //divImg = newImg;
    } else if (imgw > wsize && imgh <= hsize) {
        timgw = wsize;
        timgh = (wsize / imgw) * imgh;
    } else if (imgw <= wsize && imgh > hsize) {
        timgw = (hsize / imgh) * imgw;
        timgh = hsize;
    } else if (imgw > wsize && imgh > hsize) {
        var comp;
        if ((wsize/imgw) >= (hsize/imgh)) {
            comp = 'W'; 
        } else { 
            comp = 'H';
        } 
   

        if (comp == 'W') {
            timgw = (hsize / imgh) * imgw;
            timgh = hsize 
        } else {
            timgw = wsize;
            timgh = (wsize / imgw) * imgh;
        }
    }
  
    document.getElementById(divImg).innerHTML = "<img src='"+ newImg.src +"' width='"+ timgw +"' height='"+ timgh +"' border=0>";
}

반응형