[Javascript & CSS] 이미지 비율 유지해서 사이즈 조절 및 가운데 정렬하기

html

<!-- 이미지를 div로 감싸고 div에 다음과 같이 스타일을주고 크기를 고정시킨다. -->

<div style="position:relative;height:200px;width:200px;">

<!-- 이미지를 absolute로 설정하고 이미지가 로드될때 사이즈와 위치를 조절할 이벤트를 설정한다. -->

<img style="position:absolute;" src="test.jsp" onload="fitImage(this)">

</div>

script

// 이미지 사이즈 조절 및 가운데 정렬

function fitImage(obj){

var naturalWidth = obj.naturalWidth; // img 너비

var naturalHeight = obj.naturalHeight; // img 높이

var imgWidth = $(obj).parent().width(); // div 너비

var imgHeight = $(obj).parent().height(); // div 높이

// (img 너비 / div 너비) 와 (img 높이 / div 높이) 를 이용해 비율을 구한다.

if(Math.abs(naturalWidth / imgWidth) < Math.abs(naturalHeight / imgHeight)){

// 작게 나온 쪽으로 크기를 100% 맞춘다.

$(obj).css('width', '100%')

// 너비가 100%일때 높이가 가변적이므로 top 속성을 이용해 높이를 구해 가운데로 위치시킨다.

var fitHeight = $(obj).height();

$(obj).css('top', ((imgHeight - fitHeight) / 2) + 'px');

$(obj).css('left', '0');

}else{

$(obj).css('height', '100%')

var fitWidth = $(obj).width();

$(obj).css('top', '0');

$(obj).css('left', ((imgWidth - fitWidth) / 2) + 'px');

}

}

* 갑자기 생각나서 쓴 글이라 테스트는 안해봤음