본문 바로가기

IT/web개발

[javascript] 이미지 사이즈 조절 화면상 이미지가 너무 클때 ...

반응형

간단한 설명을 드리면
이미지가 너무커서 화면이 일그러지는것을 막고자 보통은 너비를 고정시키거나 높이를 고정시키는 방법을 사용하죠..(섬네일을 생성해서 이미지자체를 작게 생성하는 경우도 있긴 하나 html만으로 해결이 불가함으로 패스)

아래 소스는 새로 도는 가로 사이즈를 모두 비교하여 정해진 사이즈로 조정해주는 기능을 합니다. 

<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" ></a>

반응형