구글의 지도 정보 등은 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%;
}
.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 등 소스 --
</div>
iframe 등에서 지정한 크기와는 상관없이 무조건 폭/높이를 기준으로 자동 리사이징 된다.
참고로 자동 리사이징이 아닌 원래 크기를 그대로 두고 모바일에서 볼 때 스와이핑 등으로 좌우 움직여 볼 수 있게 하려면 overflow-x 를 사용하는 게 좋다.
<div style="overflow-x: auto;">
--- iframe, table 등 소스 --
</div>
--- iframe, table 등 소스 --
</div>