Skip to content

모바일에서 이미지의 사이즈는 에디터로 업로드하는 경우 보통 크기가 픽셀만큼 자동 지정이 됩니다.

하지만, 아래처럼 하게 되면 간단히 모바일크기에 맞게 이미지가 자동 리사이징(반응형)이 됩니다.

즉, 최대 크기(max-width)를 100%로 지정하여, 자동으로 크기가 조정되고 중요한 점은 둘러싼 div 인경우 마찬가지로 % 형태로 되어 있어야 합니다.


css 부분
#content {width:100%}

jquery 부분
$("#content img").attr({"width":"", "height":""}).css({"max-width": "100%"});

본문 부분
<div id="content"><img ...></div>


위는, 기본적 형태로 예를 들었기 때문에, 각자 환경에 맞게 적용을 하여야 합니다.

profile

I see no changes, wake up in the morning and I ask myself

Is life worth living should I blast myself

Things would never be the same.

태그
엮인글 :
http://adminplay.com/169935/475/trackback
List of Articles
번호 제목 글쓴이 날짜 조회 수sort
7 플러그인 그누보드 내글 모니터 (쿠키 및 구글 스타일 변환) file ADMINPLAY 2012-01-16 13178
6 Tip IE css핵 (css hack)과 IE filter file [1] l2zeo 2013-07-03 14548
5 Tip 그누보드 메타태그(description, keywords) 설정 file [1] ADMINPLAY 2012-01-16 15397
4 플러그인 코멘트 Ajax 처리 - 아직도 코멘트(댓글)쓰고 전체 페이지 로딩되나요? ADMINPLAY 2012-01-16 16636
3 플러그인 게시판의 정렬을 이용한 최신글 file ADMINPLAY 2012-01-16 28515
2 Tip 그누보드4(G4) 변수들 l2zeo 2013-01-22 49977
» Tip 모바일에서도 이미지 리사이징 기능 적용하기 l2zeo 2013-01-24 52246

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234