iframe 모바일 버전 사이즈에 맞게..

iframe 모바일 버전 사이즈에 맞게..

QA

iframe 모바일 버전 사이즈에 맞게..

본문

<iframe width="800" height="600" src="https://calendar.google.com/calendar/embed?mode=WEEK&height=600&wkst=2&bgcolor=%23ffffff&src=ducdkgmck77m542r4bgvrvd8rg%40group.calendar.google.com&color=%23711616&ctz=Asia%2FSeoul" frameborder="0" scrolling="no" style="border-width: 0px;"></iframe>

 

이런식으로 iframe을 넣으니 모바일 버전에서는 사이즈가 줄어들지 않고

 

달력인데 수요일까지만 나오게 짤려서 나옵니다..

 

혹시 모바일 버전으로 iframe을 넣고 안 짤리게 나오려고 하면 width height 부분을 auto로 하면 되나요??

 

auto로 하니까 적용이 잘 안되는거 같더라고요... 반응형같이 사이즈에 따라서 변경 될 수 있도록

 

만들고 싶은데ㅜㅜ 도움 부탁드립니다...

이 질문에 댓글 쓰기 :

답변 2

단순하게는 width:100%로 처리해보시고

안되면 css를 이용하셔서, 

.test { overflow: hidden; position: relative; padding-bottom: 56.25%; }

클래스를 지정해서 생성하여 <div class="test"> 아이프레임주소 </div>

이런식으로 해주셔도 되겠네요.

https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

참고하세요

음냐... gfycat 유튜브 등 아이프레임으러 감싼 영상이 모바일에서 짤려서 나오는데... 정보를 찾다가 여기에 도착했습니다.  이게 정답인것 같기는 한데... 전부 영어라... 댓글만 달거 갑니다. ㅠ.ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 129,105 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT