검색어 : 자바스크립트 이미지 비율
http://dochi575.egloos.com/viewer/4306271
function resize(img) {
// 원본 이미지 사이즈 저장
var width = img.width;
var height = img.height;
// 가로, 세로 최대 사이즈 설정
var maxWidth = 340;
var maxHeight = 540;
var resizeWidth;
var resizeHeight;
// 이미지 비율 구하기
var basisRatio = maxHeight / maxWidth;
var imgRatio = height / width;
if (imgRatio > basisRatio) {
// height가 기준 비율보다 길다.
if (height > maxHeight) {
resizeHeight = maxHeight;
resizeWidth = Math.round((width * resizeHeight) / height);
} else {
resizeWidth = width;
resizeHeight = height;
}
} else if (imgRatio < basisRatio) {
// width가 기준 비율보다 길다.
if (width > maxWidth) {
resizeWidth = maxWidth;
resizeHeight = Math.round((height * resizeWidth) / width);
} else {
resizeWidth = width;
resizeHeight = height;
}
} else {
// 기준 비율과 동일한 경우
resizeWidth = width;
resizeHeight = height;
}
// 리사이즈한 크기로 이미지 크기 다시 지정
img.width = resizeWidth;
img.height = resizeHeight;
}
적용해보려고했지만..... 안됨.
var si = document.getElementById("smallimage");
var bi = document.getElementById("bigimage");
// 원본 이미지 사이즈 저장
var width = si.style.width;
var height =si.style.height;
// 가로, 세로 최대 사이즈 설정
var maxWidth = bi.style.width;
var maxHeight =bi.style.height;
var resizeWidth;
var resizeHeight;
// 이미지 비율 구하기
var basisRatio = maxHeight / maxWidth;
var imgRatio = height / width;
if (imgRatio > basisRatio) {
// height가 기준 비율보다 길다.
if (height > maxHeight) {
resizeHeight = maxHeight;
resizeWidth = Math.round((width * resizeHeight) / height);
} else {
resizeWidth = width;
resizeHeight = height;
}
} else if (imgRatio < basisRatio) {
// width가 기준 비율보다 길다.
if (width > maxWidth) {
resizeWidth = maxWidth;
resizeHeight = Math.round((height * resizeWidth) / width);
} else {
resizeWidth = width;
resizeHeight = height;
}
} else {
// 기준 비율과 동일한 경우
resizeWidth = width;
resizeHeight = height;
}
// 리사이즈한 크기로 이미지 크기 다시 지정
si.width = resizeWidth;
si.height = resizeHeight;
'차근차근 > JAVA Script' 카테고리의 다른 글
자바스크립트 이미지 비율 유지 (0) | 2014.09.25 |
---|---|
자바스크립트 예제 모음 (0) | 2014.09.25 |
섬네일 이미지 클릭시 큰 이미지로 보여주기 (0) | 2014.09.15 |
자바스크립트에서 해쉬맵 (0) | 2014.07.29 |
자바스크립트 다차원배열 (0) | 2014.07.29 |