웹마스터 팁
모바일 게시판에서 이미지 리사이즈 적용방법
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
네. 그렇군요 수정 하였습니다. ^^
-
착한악마
2014.02.25 11:47
반응형이 아니라면 @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 를 알아야 하지만요! -
착한악마
2014.02.25 17:59
모바일 레이아웃에 넣는 css는 그런필요없죠 ^^ 다만 게시판본문영역 class가 게시판스킨마다 달라서..ㅡㅡ;;;쩝.
모바일 레이아웃에 넣기에는 공용으로 쓰는 레이아웃에 넣기가 힘들듯합니다.
본문 영역만 주는것이 좋을듯한데..ㅋㅋ 모바일 레이아웃에서 모든 게시판 스킨의 본문 class를 가지고 있기에는 쩝......
이참에 한번 찾아 봐야 겠습니다. ㅋ 게시판스킨들이 본문영역에 어떤 class 를 사용하는지요
스케치북 : .rd_body
xe official : .boardReadBody
ㅡㅡ;; 다 다르네..쩝..
-
foret
2014.02.25 22:53
네 착한악마님 말씀이 맞는 거 같네요~ 제가 보통 반응형레이아웃을 쓰다보니까요 ㅎㅎ 레이아웃 css 에 넣으면 관리자모드에서 수정도 가능하고 등등 이런 것만 생각했네요.
꼭 스케치북 게시판 뿐 아니라 레이아웃 css에 추가하시면 다른 게시판에도 적용됩니다. .본문은 해당 게시판 본문 영역 class 예요.
다른데도 적용될 수 있을테니 수정 후 적용하심이 좋겠죠!