[JqueryMobile] - Jquerymobile 모바일에서 이미지 가로 세로 비율별 리사이징 예제
Jquery & Mobile 2012. 3. 29. 19:17function MRKN_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 = MRKN_imgProportion($thisWidth, $thisHeight); //Function 에 파라미터를 넘김니다
var newWidth = rtn[0]; //Return 된 배열의 0번째 값을 읽어옵니다.
var newHeight = rtn[1]; //Return 된 배열의 1번째 값을 읽어옵니다.
$this.css({ //선택된 이미지에 CSS를 변경합니다.
"width" : newWidth,
"height" : newHeight
})
}
});
이해가 안가시면 댓글 남겨주세요~
'Jquery & Mobile' 카테고리의 다른 글
[Mobile] - 모바일 웹 메타 태그 (0) | 2013.09.26 |
---|---|
[Jquery] - Replace 사용시 참조 (2) | 2012.04.30 |
[JqueryMobile] - Jquerymobile CrossDomain(PHP, ASP) 사용법 (0) | 2012.02.02 |
[JqueryMobile] - 현재페이지 ID 찾기 함수예제 (0) | 2012.02.01 |
[JqueryMobile] - 로딩이미지 출력 함수 예제(JqueryMobile) (0) | 2012.02.01 |