양 변 모두 크기 제한에 걸리는 모드만 테스트 해 보고 나머지는 걍 테스트 안해봤습니다.
급하게 뭔가를 만드는 중이어서 ....
되겠죠 뭐~ 허헛... 안되면 수정 좀 하시면 될 거라 생각합니다.
오류가 있다면 댓글 달아주세요~
보시면 아시다시피... ul > li > a.thumb > img 태그에 적용되도록 했습니다.
$("ul li a.thumb img").each(function() {
// 모드가 0이면 두 변 중 더 긴 변의 길이가 제한에 걸리도록 합니다.
// 모드가 1이면 가로 길이가 제한에 걸리도록 합니다.
// 모드가 2이면 세로 길이가 제한에 걸리도록 합니다.
var mode = 0;
var restrict_length = 75;
// 이미지를 가져옵니다.
var img = new Image();
img.src = $(this).attr("src");
// 현재 이미지의 비율을 저장해 둡니다.
var ratio = img.width / img.height; // 비율
// 모드를 확인한 후에 세로를 기준으로 줄일 것인지 가로를 기준으로 줄일 것인지 결정합니다.
if((mode == 0 && img.width > img.height) || mode == 1) {
// 가로 길이가 제한보다 긴 경우에만 작동합니다.
if(img.width > restrict_length) {
var newheight = Math.round(restrict_length / ratio);
$(this).attr({width:restrict_length, height:newheight}); // 폭과 높이를 새로 지정
}
} else {
// 세로 길이가 제한보다 긴 경우에만 작동합니다.
if(img.height > restrict_length) {
var newwidth = Math.round(restrict_length * ratio);
$(this).attr({width:newwidth, height:restrict_length}); // 폭과 높이를 새로 지정
}
}
});
급하게 뭔가를 만드는 중이어서 ....
되겠죠 뭐~ 허헛... 안되면 수정 좀 하시면 될 거라 생각합니다.
오류가 있다면 댓글 달아주세요~
보시면 아시다시피... ul > li > a.thumb > img 태그에 적용되도록 했습니다.
$("ul li a.thumb img").each(function() {
// 모드가 0이면 두 변 중 더 긴 변의 길이가 제한에 걸리도록 합니다.
// 모드가 1이면 가로 길이가 제한에 걸리도록 합니다.
// 모드가 2이면 세로 길이가 제한에 걸리도록 합니다.
var mode = 0;
var restrict_length = 75;
// 이미지를 가져옵니다.
var img = new Image();
img.src = $(this).attr("src");
// 현재 이미지의 비율을 저장해 둡니다.
var ratio = img.width / img.height; // 비율
// 모드를 확인한 후에 세로를 기준으로 줄일 것인지 가로를 기준으로 줄일 것인지 결정합니다.
if((mode == 0 && img.width > img.height) || mode == 1) {
// 가로 길이가 제한보다 긴 경우에만 작동합니다.
if(img.width > restrict_length) {
var newheight = Math.round(restrict_length / ratio);
$(this).attr({width:restrict_length, height:newheight}); // 폭과 높이를 새로 지정
}
} else {
// 세로 길이가 제한보다 긴 경우에만 작동합니다.
if(img.height > restrict_length) {
var newwidth = Math.round(restrict_length * ratio);
$(this).attr({width:newwidth, height:restrict_length}); // 폭과 높이를 새로 지정
}
}
});