[G5] 이미지나 동영상을 모바일에서 창 크기에 맞춰 출력하기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

그누보드 [G5] 이미지나 동영상을 모바일에서 창 크기에 맞춰 출력하기

페이지 정보

댓글 0건 조회 1,181회 작성일 17-09-18 14:03

본문

이미지나 동영상을 모바일에서 창 크기에 맞춰 출력하는 방법입니다.


1. jquery.mobile.resize.js 다운로드
다운받은 파일을  그누보드 / js / 에 업로드 합니다.
js 파일은 https://sir.kr/g5_tip/2024 에서 다운로드 받으세요



2. 그누보드5 / theme / basic / css / mobile.css 에 내용 추가

img,
video {
    display: inline-block;
    width: auto\9 !important; /* ie8 */
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}
.video-container {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#ctt_con img,
video {
    display: inline-block;
    width: auto\9 !important; /* ie8 */
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}
.video-container {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



3. 그누보드5 / skin / board / basic / view.skin.php 에 내용 추가

<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>

을 아래와 같이 내용 변경

<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
<script src="<?php echo G5_JS_URL; ?>/jquery.mobile.resize.js"></script>

<?php if ($board['bo_download_point'] < 0) { ?>



자료출처
https://sir.kr/g5_tip/2024
https://sir.kr/g5_tip/4890
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,248건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16081
2247 PHP
2246 그누보드
[G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기 ( update. 2018-07-20 21:01 ) 댓글+ 1 Hit.28
2245 JSP
2244 JSP
2243 HTML
2242 일반
2241 그누보드
2240 Linux
2239 제로보드
[XpressEngine] files 폴더의 비밀 ( update. 2018-07-13 21:51 ) Hit.48
2238 MySQL
2237 JavaScript
[jQuery] Magnific Popup ( write. 2018-07-12 ) Hit.58
2236 일반
전자책 읽기에 최적화된 무료 EPUB 뷰어 ( update. 2018-07-11 17:27 ) Hit.71
2235 HTML
2234 HTML
2233 그누보드
ZeroBoard 4를 그누보드 5 로 변경 ( update. 2018-07-02 21:40 ) Hit.93
2232 Search
Bing (빙) 웹마스터도구 사이트 등록하기 ( update. 2018-07-01 02:41 ) Hit.120
2231 일반
IU 노래 181곡을 Youtube에서 연속듣기 ( update. 2018-07-04 23:09 ) Hit.130
2230 그누보드
2229 그누보드
XE -> 그누보드5 변경 v7 ( update. 2018-06-12 13:13 ) Hit.250
2228 제로보드
2227 호스팅
무료 호스팅을 제공하는 업체 ( update. 2018-06-12 03:53 ) Hit.195
2226 제로보드
[XpressEngine] 버전 확인하기 ( write. 2018-06-11 ) Hit.160
2225 제로보드
2224 호스팅
let's encrypt 지원하는 호스팅 ( write. 2018-06-07 ) Hit.176
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
108
어제
1,410
최대
3,174
전체
4,135,544

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.