본문 바로가기
Program

모바일에서 이미지 가로 세로 비율별 리사이징

본문

겔럭시 노트와 넥서스S에서 테스트 할땐 문제가 없었는대


아이폰에서 사진이 리사이징이 안되거나 가령 가로사이즈는 고정으로 지정하고 세로사이즈는 %으로 주었을때

찌르거지는 현상이 있었습니다.


넥서스원에서도 확인을 해보니 같은 현상이구요


처음엔 viewport 를 가지고 시도를 해보다가 그것도 안되서 세로모드 지원만 해보자 생각을 했는데

웹모바일엔 대체 세로 모드 가로 모드 고정으로 어떻게 하는건지 ㅠㅠ


여튼 다음과 같은 방법으로 일단 처리 했습니다.


출처 : http://mrkn.tistory.com/entry/JqueryMobile-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B0%80%EB%A1%9C-%EC%84%B8%EB%A1%9C-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95


function imgProportion($targetWidth, $targetHeight)

{

var DeviceWidth = parseInt($(window).width()); //핸드폰의 가로 사이즈를 구합니다.

var a1  = DeviceWidth * $targetHeight; //이미지 세로사이즈 계산식

var newHeight  = (a1 / $targetWidth); //이미지 세로사이즈 계산식

var rtnSize = new Array((DeviceWidth), newHeight);  //리사이징 된 이미지 사이즈 리턴

return rtnSize;

}

$("img").each(function(){ //이미지를 먼저 찾습니다.

var $this  = $(this); //선택자를 지정합니다.

var $thisWidth  = parseInt($this.css("width")); //선택된 이미지의 가로사이즈를 구합니다.

var $thisHeight = parseInt($this.css("height")); //선택된 이미지의 세로사이즈를 구합니다.

var clientWidth = parseInt($(window).width()); //핸드폰의 가로사이즈를 구합니다.

if($thisWidth > clientWidth) //만약에 이미지 가로가 핸드폰 가로보다 길다면....

{

var rtn  = imgProportion($thisWidth, $thisHeight); //Function 에 파라미터를 넘김니다

var newWidth  = rtn[0]; //Return 된 배열의 0번째 값을 읽어옵니다.

var newHeight  = rtn[1];  //Return 된 배열의 1번째 값을 읽어옵니다.

$this.css({  //선택된 이미지에 CSS를 변경합니다.

"width"  : newWidth,

"height" : newHeight

})

}

});


[이 게시물은 듀라님에 의해 2015-04-03 10:08:13 워드프레스에서 이동 됨]
[이 게시물은 듀라님에 의해 2015-04-03 10:27:24 Public에서 이동 됨]
[이 게시물은 듀라님에 의해 2015-04-03 10:33:53 팁과강좌에서 이동 됨]
[이 게시물은 최고관리자님에 의해 2017-06-10 14:26:27 Mobile에서 이동 됨]
0 0
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

l2j (121.♡.101.20) 작성일12-06-26 13:01 조회2,643회 댓글0건

댓글목록

등록된 댓글이 없습니다.

Program 목록

게시물 검색

사이트 정보

  • 회사명 회사명 / 대표 대표자명
  • 주소 OO도 OO시 OO구 OO동 123-45
  • 사업자 등록번호 123-45-67890
  • 전화 02-123-4567 / 팩스 02-123-4568
  • 통신판매업신고번호 제 OO구 - 123호
  • 개인정보관리책임자 정보책임자명

고객센터

  • 02-1234-5678
  • abc@abc.com
  • 월-금 am 11:00 - pm 05:00
  • 점심시간 : am 12:00 - pm 01:00
  • 주말&공휴일은 1:1문의하기를 이용하세요.
상단으로