테스트 사이트 - 개발 중인 베타 버전입니다

게시판 모바일 상단 이미지 반응형 문의 채택완료

정민황 3년 전 조회 1,854

검색도 해보고 이것, 저것 시도해봤는데, 도저희 해결이 안되서 문의글 올려봅니다^^

 

게시판 수정 에 들어가 모바일 상단 내용 에 이미지를 넣고 모바일에서 해상도에 따라 자동으로 보이게 하고 싶은데

 

이미지가 원본 이미지 그대로 노출이 됩니다.

 

반응형으로  해상도에 따라 자동으로 크기가 줄어들게 하려면 어떻게 해야 할까요??

 

참고로 나리야 빌더 사용합니다.

 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
s
sinbi Expert
3년 전

그냥 /img 폴더에 이미지 넣고, 스킨에서 media 태그 이용해 반응형 짜시는 게 편하실 듯.

 

ps.

말씀하신 부분이 안 되는 건 버그자료실에 신고해서 그누 운영진이 해결해줘야 할 문제로 보이네요.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

정민황
3년 전
내용이 하나면 그냥 스킨에서 작업하면 되는데, 매번 내용이 바뀔때마다 바꾸기가 번거러울것 같아서 고민입니다.

댓글을 작성하려면 로그인이 필요합니다.

view.skin.php 가장 하단에

 

</p>

<p><script>

bvc = bo_v_con.getElementsByTagName("img");

onresize = function() {

    for (i = 0; i < bvc.length; i++) {

        if (bvc[i].indexOf("/data/editor/") > -1) {

            bvc[i].style.width =  bvc[i].naturalWidth < bo_v_con.offsetWidth ? bvc[i].naturalWidth + "px" : "100%";

        }

    }

}

onresize();

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

정민황
3년 전
해당 보드에 적용을 해봤는데, 변화가 없는것 같습니다.
나리야빌더는 좀 다른가 싶기도 하고...
가르쳐 주신 유용한 내용 한번더 적용 시도해 보겠습니다.
감사합니다~~~

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
3년 전

</p>

<p>.nt-container>p:first-child>img,</p>

<p>script+p>img {</p>

<p>  width:100%;</p>

<p>  height:auto;</p>

<p>  max-width:100%;</p>

<p>}</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

3년 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

정민황
3년 전
아... 한번 해보겠습니다.
제 검색 실력이 부족했었나 봅니다.
빠른 댓글 진심 감사 드립니다.
시도후 댓글 남기겠습니다.
정민황
3년 전
게시판 설정 항목에서 상단 내용이나 하단 내용에 사이즈가 큰 이미지를 첨부하면 위 화면처럼 가로폭에 맞게 리사이즈 되지 않고 원본 크기만큼 영역을 벗어나서 문제가 발생합니다. 특히 반응형으로 사이트를 제작할 때는 더 그렇죠.

해당 부분은 별도의 영역이 지정되어 있지 않아서 원본 파일을 수정해야 합니다.





수정파일 : bbs/board_head.php



echo html_purifier(stripslashes($board['bo_mobile_content_head']));

위 코드를 이렇게 수정.

echo "<div class='board_hd_con'>".html_purifier(stripslashes($board['bo_mobile_content_head']))."</div>";





echo html_purifier(stripslashes($board['bo_content_head']));

위 코드를 이렇게 수정.

echo "<div class='board_hd_con'>".html_purifier(stripslashes($board['bo_content_head']))."</div>";





사용 중인 default.css, mobile.css 파일에 추가.

.board_hd_con img {max-width:100%;height:auto}





게시판 하단 내용은 bbs/board_tail.php 파일을 비슷한 방법으로 수정.


////////////////////////////////////////////////////////////

사용 중인 default.css, mobile.css 파일에 추가.

.board_hd_con img {max-width:100%;height:auto}

위에건 CSS 폴더안에 있는걸 얘기하는거겠죠??

모두 적용해봤는데, 역시 안되네요....
정민황
3년 전
위링크 방법으로 해결한것(?) 같습니다.
나리야 빌더라 조금 달랐던것 같습니다.
감사 드립니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인