회원가입

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기

iframe (지도) 등을 모바일에서 자동 리사이징 하기

Profile
마래바

구글의 지도 정보 등은 iframe 으로 되어 있다.

PC 화면을 기준으로 지도를 삽입하면 모바일 페이지에서는 자동 리사이즈가 안되어 프레임 바깥으로 밀려나곤 한다.

이때 div 를 이용해 자동으로 그 안에 포함한 iframe, embed 등을 화면 폭에 맞게 리사이징 해 주는 방법이다.

이 방법은 모바일 뿐 아니라, PC 화면에서도 같은 방식으로 작동한다.

 

1. 우선 해당 board 모듈의 style.css 에 아래 코드(자동 리사이징 클래스)를 추가한다.

/* Flexible iFrame 등, 지도 등을 폭에 맞게 자동 리사이징 */

.Flexible-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

 

2. 그리고 필요한 소스(iframe, embed, object 등)를 Flexible-container 클래스로 지정하면 된다.

<div class="Flexible-container">

--- iframe 등 소스 --

</div> 

iframe 등에서 지정한 크기와는 상관없이 무조건 폭/높이를 기준으로 자동 리사이징 된다.

 

 

참고로 자동 리사이징이 아닌 원래 크기를 그대로 두고 모바일에서 볼 때 스와이핑 등으로 좌우 움직여 볼 수 있게 하려면 overflow-x 를 사용하는 게 좋다.

<div style="overflow-x: auto;">

--- iframe, table 등 소스 --

</div> 

 

 

 

댓글
0
Profile

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기