리사이즈 된 이미지의 높이 값 알아내기

그누보드에서는 원본이미지의 넓이가 게시판에 설정된 넓이보다 클 경우 자동으로 리사이즈 됩니다.
이 때 리사이즈 된 이미지 값은 당연히 게시판에 설정된 값이므로 쉽게 알 수 있지만, 높이 값은 따로 구해야 합니다.
혹시 중복이면 자삭하겠습니다.

이 팁은 이미지를 한 장만 올릴 수 있는 게시판에서 사용할 때를 가정하고 만든 팁입니다.

js/board.js 에서

// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > imageWidth) {
imageHeight = parseFloat(target[i].width / target[i].height)
target[i].width = imageWidth;
target[i].height = parseInt(imageWidth / imageHeight);
target[i].style.cursor = 'pointer';
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
}

부분을

// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > imageWidth) {
imageHeight = parseFloat(target[i].width / target[i].height)
target[i].width = imageWidth;
target[i].height = parseInt(imageWidth / imageHeight);
pixheight(target[i].height);//이미지리사이즈된 높이 계산 by 지운아빠
target[i].style.cursor = 'pointer';
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
} else {
pixheight(target[i].tmp_height);//이미지리사이즈된 높이 계산 by 지운아빠
}

로 고쳐주시면 pixheight(a) 에 리사이즈 된 높이 값이 들어가게 됩니다.


활용은

function pixheight(a){//이미지리사이즈된 높이 계산해서 버튼 위치 지정 by 지운아빠
var pixheight = a / 2;
$('.btn_pix').css('top',pixheight);
}

과 같이 할 수 있습니다.

리사이즈 된 이미지 높이의 중간에 원하는 버튼이 위치하도록 활용한 예입니다.