[javascript] 이미지 태그 삽입 시 가로 세로 비율 조정

이미지 태그 스크립트에서 가로사이즈나 세로 사이즈를 고정할 경우 이미지의 세로또는 가로가 찌그러져 보이는 경우가 종종 생깁니다.

정해진 규격 안에서이미지가 깨지지 않도록 아래의 스크립트를 이용하여 코딩할 수 있습니다.

샘플코드는 아래와 같습니다.

<script>
function adj_img(obj){
    x = obj.width;
    y = obj.height;

    if (x==0){
        location.reload([true]);
    }

    y1 = (124 * y) / x;
    x1 = (x * 94) / y;

    x2 = 124;
    y2 = y1;

    x3 = x1;
    y3 = 94;

    if (x2*y2<x3*y3){
        x =x2;
        y =y2;
    }
    else{
        x =x3;
        y =y3;
    }

    obj.width = x;
    obj.height = y;

    return;
}

</script>

태그를 사용하는 예시입니다.


<img src="http://imgnews.naver.com/image/001/2008/01/14/kp1_080114022500.jpg" border="0" onload="Javascript:adj_img(this)" name="pic" >