웹마스터 팁
모바일 게시판에서 이미지 리사이즈 적용방법
2014.02.24 15:55
from @foret님
http://www.xpressengine.com/index.php?mid=userForum&document_srl=22621815&comment_srl=22621961&rnd=22621965#comment_22621965
board.css에 아래를 추가해주세요. 그럼 끝
@media (max-width: 480px) {.본문 img {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}}
이후에 본문내 이미지 조절 관련 애드온을 꺼주시고 테스트 하시면 됩니다.
댓글 6
-
foret
2014.02.24 15:56
-
socialskyo
2014.02.24 15:58
네. 그렇군요 수정 하였습니다. ^^
-
반응형이 아니라면 @media (max-width: 480px) {.본문 img {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}}
media 태그는 필요 없을듯합니다.
*참고로 레이아웃에 입력시 컨텐츠 영역에 있는 모든 img 파일이 100% 되버립니다. 참고로 썸네일까지 100%가 되니 이점 주의하셔야 합니다.
-
foret
2014.02.25 15:33
Media 태그를 붙이지 않으면 모바일이 아니라 원래 크기 게시판에서도 100% 로 나오는지라 ㅎㅎ 무조건 100% 가 되길 바라지 않는 너비도 있을 거 같아 일단 넣으시고 수정하시는게 좋을 것 같고요. Img 앞에 .게시판본문영역class를 넣으면 본문영역 img 만 적용되니 레이아웃 css에 넣어도 문제 없을겁니다 ^^ 해당스킨게시판본문영역class 를 알아야 하지만요! -
모바일 레이아웃에 넣는 css는 그런필요없죠 ^^ 다만 게시판본문영역 class가 게시판스킨마다 달라서..ㅡㅡ;;;쩝.
모바일 레이아웃에 넣기에는 공용으로 쓰는 레이아웃에 넣기가 힘들듯합니다.
본문 영역만 주는것이 좋을듯한데..ㅋㅋ 모바일 레이아웃에서 모든 게시판 스킨의 본문 class를 가지고 있기에는 쩝......
이참에 한번 찾아 봐야 겠습니다. ㅋ 게시판스킨들이 본문영역에 어떤 class 를 사용하는지요
스케치북 : .rd_body
xe official : .boardReadBody
ㅡㅡ;; 다 다르네..쩝..
-
foret
2014.02.25 22:53
네 착한악마님 말씀이 맞는 거 같네요~ 제가 보통 반응형레이아웃을 쓰다보니까요 ㅎㅎ 레이아웃 css 에 넣으면 관리자모드에서 수정도 가능하고 등등 이런 것만 생각했네요.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
카카오스토리 링크
[14]
 | 맞장 | 2014.02.15 |
| 스케치북5 게시판 스킨 사용시 모바일 코멘트 수정이 전혀 안되는증상 [24] | AJKJ | 2014.01.05 |
| Specify image dimensions | socialskyo | 2014.02.26 |
| 모바일 게시판에서 이미지 리사이즈 적용방법 [6] | socialskyo | 2014.02.24 |
|
회원가입 확장 모듈 1.7.X 및 모바일에서 사용가능하도록
[10]
| hhgyu | 2013.03.18 |
| textyle에서 카카오 보내기 버튼 넣기 | 웹빌드 | 2014.02.24 |
| 부트스트랩 레이아웃 제작시 메뉴 코딩팁 | 웹빌드 | 2014.02.23 |
| 코어 수정 없이 스킨 수정만으로 게시판 목록에 유튜브,비메오 썸네일 출력 [2] | foret | 2014.02.23 |
| 게시판 목록의 new 아이콘 바꾸기 [1] | foret | 2014.02.23 |
|
[애드온]게시글 공지 쉽게 내리기
[12]
| 민채아빠 | 2013.01.17 |
|
위젯 게시판 선택시 다중선택하기 !
[2]
| GomSang | 2014.02.21 |
| GNB 메뉴를 쉽게 만드는 jQuery plugin [2] | 김개발 | 2014.02.14 |
|
복권 모듈 가운데 긁었을때 반응하게 하기
[6]
| 귀머거리하늘 | 2013.11.09 |
| XE 1.7.4 "이메일 주소로 계정 찾기" 오류 해결 방법 | 꿈돌리 | 2014.02.20 |
| 누리고 쇼핑몰 모바일버전에서 백지화현상 수정하는 팁 [5] | garnecia | 2014.02.19 |
| 추천/비추천/신고시 확인(메시지 창 띄우기)하기 [21] | explode | 2013.11.27 |
| 탈퇴회원 레벨 아이콘 출력 안하기 [7] | Gunmania | 2013.08.17 |
| IEXPLORER 버젼 호환성 강제 맞추기 | davidis | 2014.02.18 |
| XE 첨부파일 문제로 게시판이 백지화 될때... [1] | 똑디 | 2011.05.20 |
|
버젼 1.4.5.5 업그레이드후에 음악올리면 안뜨기에 여기 와서 다시 해보는 것입니다.
[20]
| 유샤인 | 2011.04.22 |
꼭 스케치북 게시판 뿐 아니라 레이아웃 css에 추가하시면 다른 게시판에도 적용됩니다. .본문은 해당 게시판 본문 영역 class 예요.
다른데도 적용될 수 있을테니 수정 후 적용하심이 좋겠죠!