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

• 목록

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


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